Bảng giá chuyên nghiệp

Bảng giá quyết định khách hàng có liên hệ hay không. Một bảng giá đẹp cần: so sánh rõ ràng, highlight gói bạn muốn bán, và nút CTA mỗi gói.

Tạo lại phần bảng giá với thiết kế mới:

3 gói xếp ngang (3 cột trên desktop, xếp dọc trên mobile):

Gói Basic - 199k:
- Sơn gel 1 màu
- Dũa tạo hình cơ bản
- Thời gian: ~45 phút
- Background: trắng, border nhẹ

Gói Premium - 349k (HIGHLIGHT):
- Sơn gel + nail art đơn giản (3 ngón)
- Chăm sóc da tay + dưỡng ẩm
- Thời gian: ~60 phút
- Badge "Phổ biến nhất" góc trên
- Background: gradient nhẹ từ primary color
- Scale 1.05, shadow đậm hơn, viền gradient
- Nút CTA màu primary (nổi bật nhất)

Gói VIP - 599k:
- Full set nail art (10 ngón)
- Spa tay + chăm sóc da chuyên sâu
- Nước uống miễn phí
- Thời gian: ~90 phút
- Background: trắng, border nhẹ

Thiết kế mỗi card:
- Border-radius: 20px
- Padding: 32px
- Tên gói: font heading, uppercase, letter-spacing
- Giá: font-size 48px, font-weight 800
- Danh sách feature: icon ✓ màu xanh lá trước mỗi item
- Nút "Đặt lịch ngay": full-width, border-radius 12px, hover effect
- Transition khi hover: translateY(-8px) + shadow lớn hơn

Trả lại toàn bộ file HTML hoàn chỉnh.

Mẹo tâm lý giá: Luôn đặt gói bạn muốn bán ở giữa và highlight nó. Não người có xu hướng chọn “trung dung” — không rẻ nhất, không đắt nhất.

Form liên hệ hoạt động thật

Cách 1: Tally.so (Khuyên dùng — 2 phút setup)

Tally.so là dịch vụ tạo form miễn phí, đẹp, và gửi thông báo qua email khi có người điền.

Bước 1: Vào tally.so → Sign up miễn phí (dùng Google)

Bước 2: Tạo form mới với các trường:

• Họ tên (Short text)
• Số điện thoại (Phone number)
• Chọn dịch vụ (Dropdown)
• Ghi chú (Long text)

Bước 3: Bấm Publish → Copy link form

Bước 4: Yêu cầu ChatGPT nhúng form:

Thay form liên hệ hiện tại bằng iframe nhúng Tally form:
- URL: [paste link Tally form của bạn]
- Width: 100%
- Height: 500px
- Border: none
- Border-radius: 16px
- Background form area: #f8fafc

Giữ nguyên phần thông tin liên hệ + Google Maps bên cạnh.
Trả lại toàn bộ file HTML hoàn chỉnh.

Cách 2: Formspree (Gửi qua email)

Nếu muốn giữ form tự thiết kế (đẹp hơn):

Bước 1: Vào formspree.io → Sign up → Tạo form mới → Copy form ID

Bước 2: Yêu cầu ChatGPT:

Đổi form liên hệ thành form gửi email qua Formspree:
- Action: https://formspree.io/f/[your-form-id]
- Method: POST
- Các trường: Họ tên, Email, SĐT, Chọn dịch vụ (dropdown), Tin nhắn
- Mỗi trường có label phía trên, placeholder gợi ý
- Input style: border-radius 10px, border: 1px solid #e2e8f0, padding 12px 16px, font-size 15px
- Focus state: border-color primary, subtle shadow
- Submit button: full-width, primary color, font-weight 600
- Sau khi gửi: hiện thông báo "Cảm ơn! Chúng tôi sẽ liên hệ bạn trong 24h." (dùng JavaScript)

Trả lại toàn bộ file HTML hoàn chỉnh.

Miễn phí: Formspree cho 50 submissions/tháng. Tally.so không giới hạn.

Thêm Google Maps thật

Thêm Google Maps vào phần liên hệ:

Dùng iframe embed Google Maps cho địa chỉ: 123 Nguyễn Huệ, Quận 1, TP.HCM
- Width: 100%
- Height: 300px
- Border: none
- Border-radius: 16px
- Loading: lazy

Nếu không có iframe cụ thể, dùng URL dạng:
https://www.google.com/maps/embed?pb=!1m18!...
(thay bằng toạ độ thật)

Trả lại toàn bộ file HTML hoàn chỉnh.

Cách lấy mã nhúng Google Maps:

1. Mở Google Maps
2. Tìm địa chỉ cửa hàng
3. Bấm nút Share → chọn tab Embed a map
4. Copy mã <iframe> → gửi cho ChatGPT

Animation chuyên nghiệp

Animation tốt khiến trang web sống động mà không gây khó chịu. Đây là prompt tạo animation mượt:

Thêm hiệu ứng animation cho toàn bộ trang:

1. Scroll reveal animation:
   - Mỗi section: fade-in + slide up 30px khi scroll đến
   - Duration: 0.8s, easing: cubic-bezier(0.16, 1, 0.3, 1)
   - Trigger khi element visible 20% (threshold: 0.2)
   - Dùng IntersectionObserver (không dùng thư viện)

2. Staggered animation cho grid items:
   - Card dịch vụ: xuất hiện lần lượt, delay 100ms giữa mỗi card
   - Card bảng giá: xuất hiện lần lượt, delay 150ms
   - Testimonials: xuất hiện lần lượt, delay 100ms

3. Counter animation cho số liệu:
   - Số khách hàng, số đánh giá: đếm từ 0 lên số thật
   - Duration: 2s, easing: ease-out
   - Chỉ chạy khi scroll đến (IntersectionObserver)

4. Hover micro-interactions:
   - Card: translateY(-6px) + box-shadow tăng
   - Button: scale(1.02) + shadow tăng
   - Link: color transition 0.2s
   - Image: scale(1.05) trong container overflow hidden

5. Smooth scroll cho menu navigation (scroll-behavior: smooth)

6. Nav bar: thêm shadow khi scroll xuống (scrollY > 50)

Trả lại toàn bộ file HTML hoàn chỉnh.

Tối ưu cho điện thoại

Hơn 70% người dùng Việt Nam truy cập web bằng điện thoại. Tối ưu mobile là bắt buộc:

Kiểm tra và tối ưu responsive toàn bộ trang:

Mobile (< 768px):
- Navigation: hamburger menu icon, click mở full-screen overlay menu
- Hero: padding giảm, font-size heading 28-32px, 1 nút CTA (thay vì 2)
- Grid dịch vụ: 1 cột (thay vì 3)
- Bảng giá: 1 cột, scroll ngang hoặc xếp dọc, gói Premium vẫn highlight
- Gallery: 2 cột (thay vì 3)
- Form liên hệ: full-width, 1 cột
- Section padding: 48px 16px (thay vì 80px)
- Font size body: 16px (quan trọng — prevent iOS zoom)
- Button min-height: 48px (dễ bấm bằng ngón tay)
- Nút Zalo floating: vẫn hiện, kích thước 48px

Tablet (768px - 1024px):
- Grid: 2 cột
- Bảng giá: 3 cột nhưng nhỏ hơn

Trả lại toàn bộ file HTML hoàn chỉnh.

Bonus: Thêm hiệu ứng đặc biệt

Gradient text cho heading

Đổi tiêu đề hero thành gradient text:
- Background: linear-gradient(135deg, #ec4899, #8b5cf6)
- Background-clip: text
- Color: transparent
- Font-size: 56px trên desktop, 36px trên mobile

Testimonials dạng carousel

Đổi phần đánh giá thành carousel tự động:
- Hiển thị 1 card tại 1 thời điểm trên mobile, 3 card trên desktop
- Tự chuyển sau 5 giây
- Có nút prev/next và dots indicator
- Transition: slide mượt 0.5s
- Pause khi hover

Checklist trước khi deploy

Trước khi đưa lên internet, kiểm tra:

• Tất cả thông tin chính xác (tên, SĐT, địa chỉ)
• Số điện thoại bấm được trên mobile (<a href="tel:0901234567">)
• Link Zalo hoạt động
• Form gửi được (test thử 1 lần)
• Google Maps hiển thị đúng vị trí
• Mobile: menu hoạt động, layout đẹp, chữ đọc được
• Ảnh load nhanh (width ≤ 1200px)
• Không lỗi chính tả
• Scroll mượt, animation không giật

Trang web đã hoàn thiện? Bài tiếp theo: đưa lên internet miễn phí — chỉ cần 5 phút!