| <!DOCTYPE html> |
| <html lang="vi"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Tư Vấn Thiết Kế - Dịch vụ thiết kế chuyên nghiệp</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> |
| @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Be Vietnam Pro', sans-serif; |
| scroll-behavior: smooth; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| } |
| |
| .service-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| |
| .portfolio-item:hover .portfolio-overlay { |
| opacity: 1; |
| } |
| |
| .portfolio-overlay { |
| background: rgba(0, 0, 0, 0.7); |
| transition: opacity 0.3s ease; |
| } |
| |
| .testimonial-card { |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
| } |
| |
| .nav-link:hover { |
| color: #3b82f6; |
| } |
| |
| .mobile-menu { |
| transition: all 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="fixed w-full bg-white shadow-sm z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <a href="#" class="text-2xl font-bold text-blue-600 flex items-center"> |
| <i class="fas fa-pen-ruler mr-2"></i> |
| <span>Tư Vấn Thiết Kế</span> |
| </a> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Trang chủ</a> |
| <a href="#services" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Dịch vụ</a> |
| <a href="#portfolio" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Dự án</a> |
| <a href="#about" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Về chúng tôi</a> |
| <a href="#contact" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Liên hệ</a> |
| </nav> |
| |
| <div class="hidden md:block"> |
| <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-medium transition duration-300"> |
| Liên hệ ngay |
| </a> |
| </div> |
| |
| <button id="mobile-menu-button" class="md:hidden text-gray-700"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| |
| |
| <div id="mobile-menu" class="mobile-menu hidden md:hidden absolute top-full left-0 w-full bg-white shadow-lg py-2 px-4"> |
| <a href="#home" class="block py-2 text-gray-700 hover:text-blue-600">Trang chủ</a> |
| <a href="#services" class="block py-2 text-gray-700 hover:text-blue-600">Dịch vụ</a> |
| <a href="#portfolio" class="block py-2 text-gray-700 hover:text-blue-600">Dự án</a> |
| <a href="#about" class="block py-2 text-gray-700 hover:text-blue-600">Về chúng tôi</a> |
| <a href="#contact" class="block py-2 text-gray-700 hover:text-blue-600">Liên hệ</a> |
| <a href="#contact" class="block mt-2 bg-blue-600 text-white px-4 py-2 rounded-full text-center"> |
| Liên hệ ngay |
| </a> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="hero-gradient pt-32 pb-20"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Thiết kế sáng tạo cho mọi nhu cầu</h1> |
| <p class="text-lg text-gray-600 mb-8">Chúng tôi cung cấp các giải pháp thiết kế chuyên nghiệp, sáng tạo và độc đáo giúp doanh nghiệp của bạn nổi bật giữa đám đông.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium text-center transition duration-300"> |
| Bắt đầu ngay |
| </a> |
| <a href="#portfolio" class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-8 py-3 rounded-full font-medium text-center transition duration-300"> |
| Xem dự án |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <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="Thiết kế sáng tạo" |
| class="rounded-xl shadow-xl w-full max-w-lg"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h3 class="text-center text-gray-500 mb-8">Đối tác tin cậy của</h3> |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> |
| <img src="https://via.placeholder.com/120x60?text=Client+1" alt="Client 1" class="h-12 opacity-70 hover:opacity-100 transition"> |
| <img src="https://via.placeholder.com/120x60?text=Client+2" alt="Client 2" class="h-12 opacity-70 hover:opacity-100 transition"> |
| <img src="https://via.placeholder.com/120x60?text=Client+3" alt="Client 3" class="h-12 opacity-70 hover:opacity-100 transition"> |
| <img src="https://via.placeholder.com/120x60?text=Client+4" alt="Client 4" class="h-12 opacity-70 hover:opacity-100 transition"> |
| <img src="https://via.placeholder.com/120x60?text=Client+5" alt="Client 5" class="h-12 opacity-70 hover:opacity-100 transition"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Dịch vụ của chúng tôi</h2> |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Chúng tôi cung cấp đa dạng các dịch vụ thiết kế chuyên nghiệp đáp ứng mọi nhu cầu của khách hàng.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300"> |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-paint-brush text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Thiết kế đồ họa</h3> |
| <p class="text-gray-600 mb-4">Thiết kế logo, banner, brochure, namecard và các ấn phẩm truyền thông khác với phong cách độc đáo, chuyên nghiệp.</p> |
| <a href="#" class="text-blue-600 font-medium flex items-center"> |
| Xem thêm <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300"> |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-laptop-code text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Thiết kế website</h3> |
| <p class="text-gray-600 mb-4">Thiết kế website đẹp mắt, chuẩn SEO, tốc độ tải nhanh và thân thiện với mọi thiết bị di động.</p> |
| <a href="#" class="text-green-600 font-medium flex items-center"> |
| Xem thêm <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300"> |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-building text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Thiết kế nội thất</h3> |
| <p class="text-gray-600 mb-4">Tư vấn và thiết kế không gian nội thất hiện đại, tiện nghi và phù hợp với phong cách sống của bạn.</p> |
| <a href="#" class="text-purple-600 font-medium flex items-center"> |
| Xem thêm <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300"> |
| <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-mobile-screen text-yellow-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Thiết kế ứng dụng</h3> |
| <p class="text-gray-600 mb-4">Thiết kế giao diện ứng dụng di động thân thiện, trực quan và mang lại trải nghiệm người dùng tốt nhất.</p> |
| <a href="#" class="text-yellow-600 font-medium flex items-center"> |
| Xem thêm <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300"> |
| <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-video text-red-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Video Animation</h3> |
| <p class="text-gray-600 mb-4">Sản xuất video animation chất lượng cao phục vụ quảng cáo, giới thiệu sản phẩm hoặc kể chuyện thương hiệu.</p> |
| <a href="#" class="text-red-600 font-medium flex items-center"> |
| Xem thêm <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300"> |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-bullhorn text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Tư vấn thương hiệu</h3> |
| <p class="text-gray-600 mb-4">Định vị và xây dựng hệ thống nhận diện thương hiệu toàn diện, giúp doanh nghiệp khẳng định vị thế trên thị trường.</p> |
| <a href="#" class="text-indigo-600 font-medium flex items-center"> |
| Xem thêm <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="portfolio" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Dự án tiêu biểu</h2> |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Những thiết kế ấn tượng đã giúp khách hàng của chúng tôi thành công.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="portfolio-item relative rounded-xl overflow-hidden group"> |
| <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Dự án 1" |
| class="w-full h-64 object-cover"> |
| <div class="portfolio-overlay absolute inset-0 flex items-center justify-center opacity-0"> |
| <div class="text-center p-4"> |
| <h3 class="text-white text-xl font-bold mb-2">Thiết kế website ABC</h3> |
| <p class="text-gray-200 mb-4">Thiết kế website bán hàng cho công ty thời trang</p> |
| <a href="#" class="inline-block bg-white text-blue-600 px-4 py-2 rounded-full font-medium"> |
| Xem chi tiết |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item relative rounded-xl overflow-hidden group"> |
| <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="Dự án 2" |
| class="w-full h-64 object-cover"> |
| <div class="portfolio-overlay absolute inset-0 flex items-center justify-center opacity-0"> |
| <div class="text-center p-4"> |
| <h3 class="text-white text-xl font-bold mb-2">Nhận diện thương hiệu XYZ</h3> |
| <p class="text-gray-200 mb-4">Hệ thống nhận diện thương hiệu cho công ty công nghệ</p> |
| <a href="#" class="inline-block bg-white text-blue-600 px-4 py-2 rounded-full font-medium"> |
| Xem chi tiết |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item relative rounded-xl overflow-hidden group"> |
| <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" |
| alt="Dự án 3" |
| class="w-full h-64 object-cover"> |
| <div class="portfolio-overlay absolute inset-0 flex items-center justify-center opacity-0"> |
| <div class="text-center p-4"> |
| <h3 class="text-white text-xl font-bold mb-2">Thiết kế nội thất</h3> |
| <p class="text-gray-200 mb-4">Thiết kế không gian sống hiện đại</p> |
| <a href="#" class="inline-block bg-white text-blue-600 px-4 py-2 rounded-full font-medium"> |
| Xem chi tiết |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item relative rounded-xl overflow-hidden group"> |
| <img src="https://images.unsplash.com/photo-1559028012-481c04fa702d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1636&q=80" |
| alt="Dự án 4" |
| class="w-full h-64 object-cover"> |
| <div class="portfolio-overlay absolute inset-0 flex items-center justify-center opacity-0"> |
| <div class="text-center p-4"> |
| <h3 class="text-white text-xl font-bold mb-2">Ứng dụng di động</h3> |
| <p class="text-gray-200 mb-4">Thiết kế UX/UI cho ứng dụng giáo dục</p> |
| <a href="#" class="inline-block bg-white text-blue-600 px-4 py-2 rounded-full font-medium"> |
| Xem chi tiết |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item relative rounded-xl overflow-hidden group"> |
| <img src="https://images.unsplash.com/photo-1567443024551-f3e3a7aeefd4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Dự án 5" |
| class="w-full h-64 object-cover"> |
| <div class="portfolio-overlay absolute inset-0 flex items-center justify-center opacity-0"> |
| <div class="text-center p-4"> |
| <h3 class="text-white text-xl font-bold mb-2">Video Animation</h3> |
| <p class="text-gray-200 mb-4">Video giới thiệu sản phẩm mới</p> |
| <a href="#" class="inline-block bg-white text-blue-600 px-4 py-2 rounded-full font-medium"> |
| Xem chi tiết |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item relative rounded-xl overflow-hidden group"> |
| <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="Dự án 6" |
| class="w-full h-64 object-cover"> |
| <div class="portfolio-overlay absolute inset-0 flex items-center justify-center opacity-0"> |
| <div class="text-center p-4"> |
| <h3 class="text-white text-xl font-bold mb-2">Bộ nhận diện thương hiệu</h3> |
| <p class="text-gray-200 mb-4">Logo, namecard, brochure cho nhà hàng</p> |
| <a href="#" class="inline-block bg-white text-blue-600 px-4 py-2 rounded-full font-medium"> |
| Xem chi tiết |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition duration-300"> |
| Xem tất cả dự án |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
| <img src="https://images.unsplash.com/photo-1552664730-d307ca884974?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Về chúng tôi" |
| class="rounded-xl shadow-lg w-full"> |
| </div> |
| <div class="lg:w-1/2"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Về chúng tôi</h2> |
| <p class="text-lg text-gray-600 mb-6">Tư Vấn Thiết Kế là đơn vị chuyên cung cấp các giải pháp thiết kế sáng tạo và hiệu quả cho doanh nghiệp. Với đội ngũ designer trẻ trung, nhiệt huyết và giàu kinh nghiệm, chúng tôi cam kết mang đến cho khách hàng những sản phẩm chất lượng nhất.</p> |
| |
| <div class="space-y-4 mb-8"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i class="fas fa-check-circle text-green-500 text-xl"></i> |
| </div> |
| <p class="ml-3 text-gray-700">Hơn 5 năm kinh nghiệm trong lĩnh vực thiết kế</p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i class="fas fa-check-circle text-green-500 text-xl"></i> |
| </div> |
| <p class="ml-3 text-gray-700">Đội ngũ designer chuyên nghiệp, sáng tạo</p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i class="fas fa-check-circle text-green-500 text-xl"></i> |
| </div> |
| <p class="ml-3 text-gray-700">Quy trình làm việc chuyên nghiệp, minh bạch</p> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i class="fas fa-check-circle text-green-500 text-xl"></i> |
| </div> |
| <p class="ml-3 text-gray-700">Hỗ trợ khách hàng 24/7</p> |
| </div> |
| </div> |
| |
| <a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition duration-300"> |
| Liên hệ ngay |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-blue-600 text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> |
| <div> |
| <div class="text-4xl md:text-5xl font-bold mb-2">150+</div> |
| <div class="text-lg">Dự án hoàn thành</div> |
| </div> |
| <div> |
| <div class="text-4xl md:text-5xl font-bold mb-2">50+</div> |
| <div class="text-lg">Khách hàng hài lòng</div> |
| </div> |
| <div> |
| <div class="text-4xl md:text-5xl font-bold mb-2">10+</div> |
| <div class="text-lg">Giải thưởng</div> |
| </div> |
| <div> |
| <div class="text-4xl md:text-5xl font-bold mb-2">5+</div> |
| <div class="text-lg">Năm kinh nghiệm</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Khách hàng nói gì về chúng tôi</h2> |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Những phản hồi chân thực từ khách hàng đã sử dụng dịch vụ của chúng tôi.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="testimonial-card bg-white rounded-xl p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="flex-shrink-0"> |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" |
| alt="Khách hàng 1" |
| class="w-12 h-12 rounded-full object-cover"> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-800">Chị Nguyễn Thị Mai</h4> |
| <p class="text-gray-600">Giám đốc công ty ABC</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-6">"Tôi rất hài lòng với dịch vụ thiết kế website của Tư Vấn Thiết Kế. Website đẹp, chuyên nghiệp và hoạt động rất tốt. Đội ngũ hỗ trợ nhiệt tình, luôn lắng nghe yêu cầu của khách hàng."</p> |
| <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 class="testimonial-card bg-white rounded-xl p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="flex-shrink-0"> |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" |
| alt="Khách hàng 2" |
| class="w-12 h-12 rounded-full object-cover"> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-800">Anh Trần Văn Nam</h4> |
| <p class="text-gray-600">Chủ cửa hàng thời trang</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-6">"Bộ nhận diện thương hiệu mà Tư Vấn Thiết Kế thực hiện cho cửa hàng của tôi thực sự rất ấn tượng. Khách hàng đánh giá cao hình ảnh chuyên nghiệp và phong cách riêng biệt của thương hiệu."</p> |
| <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 class="testimonial-card bg-white rounded-xl p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="flex-shrink-0"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" |
| alt="Khách hàng 3" |
| class="w-12 h-12 rounded-full object-cover"> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-800">Chị Lê Thị Hương</h4> |
| <p class="text-gray-600">Giám đốc marketing</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-6">"Video animation mà Tư Vấn Thiết Kế sản xuất cho chiến dịch quảng cáo của chúng tôi đã nhận được phản hồi rất tích cực từ khách hàng. Ý tưởng sáng tạo, hình ảnh bắt mắt và nội dung truyền tải hiệu quả."</p> |
| <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> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-blue-600 text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Sẵn sàng nâng tầm thương hiệu của bạn?</h2> |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Hãy để chúng tôi giúp bạn tạo ra những thiết kế ấn tượng và hiệu quả.</p> |
| <a href="#contact" class="inline-block bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-full font-medium transition duration-300"> |
| Liên hệ ngay |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <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-lg text-gray-600 max-w-2xl mx-auto">Hãy cho chúng tôi biết nhu cầu của bạn, chúng tôi sẽ liên hệ lại trong thời gian sớm nhất.</p> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row"> |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
| <div class="bg-white rounded-xl shadow-md p-8 h-full"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Thông tin liên hệ</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center"> |
| <i class="fas fa-map-marker-alt text-blue-600 text-xl"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-800">Địa chỉ</h4> |
| <p class="text-gray-600">123 Đường ABC, Quận 1, TP.HCM</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center"> |
| <i class="fas fa-phone-alt text-blue-600 text-xl"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-800">Điện thoại</h4> |
| <p class="text-gray-600">0901 234 567</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center"> |
| <i class="fas fa-envelope text-blue-600 text-xl"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-800">Email</h4> |
| <p class="text-gray-600">info@tuvanthietke.com</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center"> |
| <i class="fas fa-clock text-blue-600 text-xl"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-800">Giờ làm việc</h4> |
| <p class="text-gray-600">Thứ 2 - Thứ 6: 8:00 - 17:30</p> |
| <p class="text-gray-600">Thứ 7: 8:00 - 12:00</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="font-bold text-gray-800 mb-4">Theo dõi chúng tôi</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-white rounded-xl shadow-md p-8"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Gửi tin nhắn cho chúng tôi</h3> |
| <form id="contactForm"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div> |
| <label for="name" class="block text-gray-700 font-medium mb-2">Họ và tên</label> |
| <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| <div> |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Số điện thoại</label> |
| <input type="tel" id="phone" name="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| </div> |
| <div class="mb-6"> |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> |
| <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| </div> |
| <div class="mb-6"> |
| <label for="service" class="block text-gray-700 font-medium mb-2">Dịch vụ quan tâm</label> |
| <select id="service" name="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| <option value="">Chọn dịch vụ</option> |
| <option value="graphic-design">Thiết kế đồ họa</option> |
| <option value="web-design">Thiết kế website</option> |
| <option value="interior-design">Thiết kế nội thất</option> |
| <option value="app-design">Thiết kế ứng dụng</option> |
| <option value="video-animation">Video Animation</option> |
| <option value="brand-consulting">Tư vấn thương hiệu</option> |
| </select> |
| </div> |
| <div class="mb-6"> |
| <label for="message" class="block text-gray-700 font-medium mb-2">Nội dung</label> |
| <textarea id="message" name="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"></textarea> |
| </div> |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300"> |
| Gửi tin nhắn |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="h-96 w-full"> |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.123037887528!2d106.6303043152616!3d10.80232796167148!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752a459776f3b1%3A0x9c3a1f8a0d6e9b8!2s123%20ABC%20Street%2C%20District%201%2C%20Ho%20Chi%20Minh%20City!5e0!3m2!1sen!2s!4v1620000000000!5m2!1sen!2s" |
| width="100%" |
| height="100%" |
| style="border:0;" |
| allowfullscreen="" |
| loading="lazy"></iframe> |
| </div> |
|
|
| |
| <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> |
| <h3 class="text-xl font-bold mb-6 flex items-center"> |
| <i class="fas fa-pen-ruler mr-2"></i> |
| <span>Tư Vấn Thiết Kế</span> |
| </h3> |
| <p class="text-gray-400 mb-4">Chúng tôi cung cấp các giải pháp thiết kế sáng tạo và hiệu quả cho doanh nghiệp.</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-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-6">Dịch vụ</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Thiết kế đồ họa</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Thiết kế website</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Thiết kế nội thất</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Thiết kế ứng dụng</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Video Animation</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-6">Liên kết</h3> |
| <ul class="space-y-3"> |
| <li><a href="#home" class="text-gray-400 hover:text-white transition">Trang chủ</a></li> |
| <li><a href="#services" class="text-gray-400 hover:text-white transition">Dịch vụ</a></li> |
| <li><a href="#portfolio" class="text-gray-400 hover:text-white transition">Dự án</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">Về chúng tôi</a></li> |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Liên hệ</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-6">Liên hệ</h3> |
| <ul class="space-y-3 text-gray-400"> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt mt-1 mr-3"></i> |
| <span>123 Đường ABC, Quận 1, TP.HCM</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt mr-3"></i> |
| <span>0901 234 567</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope mr-3"></i> |
| <span>info@tuvanthietke.com</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
| <p>© 2023 Tư Vấn Thiết Kế. Tất cả quyền được bảo lưu.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
|
|
| <script> |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| |
| mobileMenu.classList.add('hidden'); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| const headerHeight = document.querySelector('header').offsetHeight; |
| const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight; |
| |
| window.scrollTo({ |
| top: targetPosition, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| |
| |
| const backToTopButton = document.getElementById('back-to-top'); |
| |
| window.addEventListener('scroll', () => { |
| 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', () => { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| const contactForm = document.getElementById('contactForm'); |
| |
| contactForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| |
| const name = document.getElementById('name').value; |
| const phone = document.getElementById('phone').value; |
| const email = document.getElementById('email').value; |
| const service = document.getElementById('service').value; |
| const message = document.getElementById('message').value; |
| |
| |
| |
| alert(`Cảm ơn bạn ${name} đã liên hệ! Chúng tôi sẽ phản hồi sớm nhất có thể.`); |
| |
| |
| contactForm.reset(); |
| }); |
| |
| |
| const portfolioItems = document.querySelectorAll('.portfolio-item'); |
| |
| portfolioItems.forEach(item => { |
| item.addEventListener('mouseenter', () => { |
| const overlay = item.querySelector('.portfolio-overlay'); |
| overlay.style.opacity = '1'; |
| }); |
| |
| item.addEventListener('mouseleave', () => { |
| const overlay = item.querySelector('.portfolio-overlay'); |
| overlay.style.opacity = '0'; |
| }); |
| }); |
| </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=vudepzai/aaa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
