File size: 47,424 Bytes
65b21ed | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 | <!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/Navigation -->
<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>
<!-- Mobile Menu -->
<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>
<!-- Hero Section -->
<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>
<!-- Clients 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>
<!-- Services 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">
<!-- Service 1 -->
<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>
<!-- Service 2 -->
<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>
<!-- Service 3 -->
<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>
<!-- Service 4 -->
<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>
<!-- Service 5 -->
<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>
<!-- Service 6 -->
<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>
<!-- Portfolio 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">
<!-- Project 1 -->
<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>
<!-- Project 2 -->
<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>
<!-- Project 3 -->
<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>
<!-- Project 4 -->
<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>
<!-- Project 5 -->
<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>
<!-- Project 6 -->
<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>
<!-- About 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>
<!-- Stats 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>
<!-- Testimonials 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">
<!-- Testimonial 1 -->
<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>
<!-- Testimonial 2 -->
<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>
<!-- Testimonial 3 -->
<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>
<!-- CTA 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>
<!-- Contact 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>
<!-- Map 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 -->
<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>
<!-- Back to Top Button -->
<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>
// Mobile Menu Toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Smooth Scrolling for Anchor Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
// Close mobile menu if open
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'
});
}
});
});
// Back to Top Button
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'
});
});
// Form Submission
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// Get form values
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;
// Here you would typically send the data to a server
// For this example, we'll just show an alert
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ể.`);
// Reset form
contactForm.reset();
});
// Portfolio Item Hover Effect
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> |