# 🚀 Bộ 10 Prompt Mẫu Cho Bolt.new — Build Web Nhanh & Chuyên Nghiệp > **Hướng dẫn sử dụng:** Copy toàn bộ nội dung trong từng khung code, paste trực tiếp vào ô prompt của [Bolt.new](https://bolt.new). Mỗi prompt đã được tối ưu để sinh ra codebase đầy đủ, có thể chỉnh sửa ngay. --- ## Mục lục 1. [Landing Page Logistics Việt Nam](#1-landing-page-doanh-nghiệp-logistics-việt-nam) 2. [Trang Đặt Lịch Spa/Clinic](#2-trang-đặt-lịch-hẹn-spaclinic) 3. [Portfolio Freelancer Developer](#3-trang-portfolio-freelancer-developer) 4. [Giới Thiệu Sản Phẩm SaaS B2B](#4-trang-giới-thiệu-sản-phẩm-saas-b2b) 5. [Đăng Ký Sự Kiện Workshop](#5-trang-đăng-ký-sự-kiện-workshop) 6. [Bán Hàng Dropshipping](#6-trang-bán-hàng-dropshipping) 7. [Giới Thiệu Nhà Hàng + Menu](#7-trang-giới-thiệu-nhà-hàng-với-menu) 8. [Showcase Agency Creative](#8-trang-showcase-agency-creative) 9. [Landing Page Mobile App](#9-trang-landing-cho-mobile-app) 10. [FAQ + Pricing Startup](#10-trang-faq--pricing-cho-startup) --- ## 1. Landing Page Doanh Nghiệp Logistics Việt Nam ``` Build a professional Vietnamese logistics company landing page using React + Vite + Tailwind CSS. All content must be written in Vietnamese. The color scheme should use deep navy blue (#0A1628) and orange (#F97316) as primary brand colors. Include the following sections in order: sticky navigation bar with logo and CTA button, full-width hero section with a headline about fast & reliable freight forwarding across Vietnam, services section (road freight, sea freight, air freight, warehousing) with icon cards, real-time tracking teaser section with a mock input field, client logos/trust badges section, stats counter section (deliveries, partners, provinces covered), testimonials carousel, contact form with fields for company name, cargo type, and route, and a footer with hotline and social links. Use subtle animations with Framer Motion on scroll. Make it fully responsive for mobile, tablet, and desktop. Add a floating WhatsApp/Zalo chat button fixed at bottom-right corner. ``` > **📝 Ghi chú:** Thay thế logo placeholder và số liệu thống kê (deliveries, provinces) bằng dữ liệu thật của doanh nghiệp trước khi deploy. Kiểm tra lại font chữ — nên chỉ định thêm `font-family: 'Be Vietnam Pro'` cho đúng chuẩn thương hiệu Việt. --- ## 2. Trang Đặt Lịch Hẹn Spa/Clinic ``` Create a luxury spa and beauty clinic appointment booking website using Next.js 14 with App Router, Tailwind CSS, and shadcn/ui components. All text content must be in Vietnamese. Use a soft, elegant color palette: blush rose (#F9E4E4), warm white (#FAFAF8), and gold (#C9A84C) as accents. The page must include: a hero section with a calming full-screen background image overlay and a headline promoting relaxation, a services menu grid showing facial treatments, massage, body care, and nail services with prices in VND format, a multi-step appointment booking form (step 1: choose service, step 2: pick date/time using a calendar picker, step 3: enter personal info), a meet-the-therapist section with staff profile cards, a before/after gallery section with image comparison slider, a Google Maps embed for location, customer review cards with star ratings, and a sticky bottom bar on mobile showing a "Đặt lịch ngay" CTA button. Ensure form validation with React Hook Form and Zod. ``` > **📝 Ghi chú:** Phần calendar picker cần tích hợp thêm logic disable ngày đã đầy lịch — nếu Bolt chưa sinh ra, hãy prompt tiếp: *"Add unavailable date logic to the calendar where weekends are blocked by default."* Giá dịch vụ (VND) cần format đúng kiểu `1.200.000 ₫`. --- ## 3. Trang Portfolio Freelancer Developer ``` Build a sleek dark-mode personal portfolio website for a Vietnamese full-stack freelance developer using React + Vite, Tailwind CSS, and Framer Motion. All content in Vietnamese with technical terms kept in English where appropriate. Use a dark background (#0D0D0D), electric blue (#3B82F6), and cyan (#06B6D4) as accent colors. Include these sections: an animated hero with name, title, and a typewriter effect rotating through roles (Front-end Dev, Back-end Dev, UI/UX), an about section with a short bio and tech stack icon grid (React, Node.js, PostgreSQL, Docker, etc.), a filterable project showcase with cards showing project name, stack used, description, and links to GitHub and live demo, a skills section with animated progress bars or radial charts, a work experience timeline, a pricing/service packages section with three tiers (Basic, Pro, Enterprise) in VND, a contact section with a working email form, and a downloadable CV button. Add smooth page scroll animations and a custom cursor effect on desktop. ``` > **📝 Ghi chú:** Phần project showcase cần bổ sung dữ liệu thật — hãy tạo file `projects.ts` riêng để dễ cập nhật. Nếu muốn form liên hệ hoạt động thực tế, prompt thêm tích hợp **EmailJS** hoặc **Resend API**. --- ## 4. Trang Giới Thiệu Sản Phẩm SaaS B2B ``` Create a modern B2B SaaS product landing page in Vietnamese using Next.js 14, Tailwind CSS, and shadcn/ui. The product is a HR management software (quản lý nhân sự) designed for Vietnamese SMEs. Use a professional color scheme: indigo (#4F46E5) primary, white backgrounds, and slate gray for text. The page must include: a navigation bar with logo, feature links, and "Dùng thử miễn phí 14 ngày" CTA, a hero section with a bold value proposition headline, product screenshot mockup, and two CTA buttons (try free, watch demo), a social proof bar with client logos, a features section with alternating image-text layouts for 4 key features (timekeeping, payroll, leave management, reports), a product demo video embed section, an integration logos section (accounting software, banks), a 3-tier pricing table (Starter/Growth/Enterprise) with feature comparison, an FAQ accordion section, a customer case study card, and a final CTA banner with email capture. All animations should be subtle and professional. Include a cookie consent banner. ``` > **📝 Ghi chú:** Pricing table là phần quan trọng nhất — kiểm tra kỹ logic highlight gói "Phổ biến nhất" và đảm bảo bảng so sánh tính năng responsive tốt trên mobile. Nên thêm schema markup `SoftwareApplication` cho SEO. --- ## 5. Trang Đăng Ký Sự Kiện Workshop ``` Build an event registration landing page in Vietnamese for a digital marketing workshop using React + Vite, Tailwind CSS, and React Hook Form. The event is a 2-day in-person workshop in Ho Chi Minh City. Use vibrant, energetic colors: deep purple (#7C3AED) and yellow (#FBBF24). Include these sections: an event hero banner with event name, date (countdown timer), location, and a "Đăng ký ngay" button, an event highlights section showing what attendees will learn with icon-based bullet points, speaker profile cards with photo, name, title, and bio, an event schedule/agenda accordion broken down by day and time slot, a ticket tier section showing Early Bird, Standard, and VIP pricing in VND with a Stripe-ready payment button, a registration form collecting full name, email, phone, company, and job title with field validation, an FAQ accordion, a venue section with embedded Google Maps, and a social sharing section. Add a sticky top banner showing "Còn X chỗ trống" with a decreasing counter to create urgency. Ensure full mobile responsiveness. ``` > **📝 Ghi chú:** Countdown timer và "Còn X chỗ trống" counter chỉ mang tính demo — cần kết nối backend thực tế (Supabase hoặc Firebase) để đồng bộ số lượng vé còn lại. Form submit nên tích hợp webhook Zapier để tự động gửi email xác nhận. --- ## 6. Trang Bán Hàng Dropshipping ``` Create a high-converting Vietnamese dropshipping product landing page using React + Vite and Tailwind CSS. The product is a portable mini air conditioner (máy lạnh mini di động). Use a clean white background with sky blue (#0EA5E9) and orange (#EA580C) accents for urgency elements. The page must follow a sales funnel structure: a headline-focused hero with a bold Vietnamese benefit statement, a product image gallery with zoom functionality, a problem-agitation section explaining summer heat pain points in Vietnam, a solution section with 5 key product features and icons, a social proof section with 3 video testimonial thumbnails and star ratings, a product variant selector (color, size) with stock counter, a prominent price block showing original price crossed out with sale price and savings badge, an order form with name/phone/ address fields and COD payment option, a shipping info section (giao hàng toàn quốc), an FAQ section, and a floating "Mua ngay" sticky button on mobile. Add a red urgency timer banner at the top saying "Flash Sale kết thúc sau:". ``` > **📝 Ghi chú:** Trang dropshipping phải tối ưu tốc độ tải — tránh import quá nhiều thư viện animation. Phần order form với COD là đặc thù thị trường Việt Nam, cần đảm bảo validate số điện thoại đúng định dạng `(+84) 09x/03x/07x`. Flash sale timer chỉ là visual, cần backend để reset đúng thời điểm. --- ## 7. Trang Giới Thiệu Nhà Hàng Với Menu ``` Build a beautiful Vietnamese restaurant website using Next.js 14, Tailwind CSS, and Framer Motion. The restaurant specializes in modern Vietnamese cuisine (ẩm thực Việt Nam hiện đại) in Hanoi. Use warm, appetizing colors: deep red (#991B1B), cream (#FEF3C7), and dark brown (#292524). All content must be in Vietnamese. Include: a cinematic full-screen video hero section with restaurant name overlay and reservation CTA, an about/story section with chef photo and brand narrative, a full digital menu section organized by categories (Khai vị, Món chính, Tráng miệng, Đồ uống) with dish cards showing photo, name, description, price in VND, and dietary tags (chay/không gluten), a featured dishes section with large food photography, a table reservation form with date picker, time slot selector, party size, and special requests field, an ambiance gallery section with masonry photo grid, a private dining and events section, customer review cards sourced from Google-style layout, opening hours and location section with Google Maps, and a footer with social links and newsletter signup. Use lazy-loading for all images. ``` > **📝 Ghi chú:** Menu là phần cốt lõi — nên tổ chức data vào file `menu.json` để dễ cập nhật món ăn và giá mà không cần sửa code. Ảnh món ăn ảnh hưởng lớn đến chuyển đổi, hãy dùng ảnh thật chất lượng cao thay cho placeholder trước khi ra mắt. --- ## 8. Trang Showcase Agency Creative ``` Design a visually stunning creative agency portfolio website in Vietnamese using React + Vite, Tailwind CSS, GSAP for advanced animations, and Three.js for a 3D hero element. The agency specializes in branding, UI/UX design, and digital campaigns. Use a bold editorial aesthetic: pure black (#000000) background, white text, and a single neon accent color (#39FF14 lime green). Include: a full-screen 3D animated hero with agency name in large typography and a "Xem công trình" scroll CTA, a horizontal scroll case study section showcasing 6 past projects with client name, category, and full-width project imagery, a services section using large hover- animated cards for Branding, Digital, Motion, and Web services, a culture/team section with distortion hover effects on team photos, an awards and recognition section, a client roster logo grid with grayscale-to-color hover effect, a process timeline section (Khám phá → Chiến lược → Thiết kế → Ra mắt), a contact section with large typography and email link, and a minimal footer. Every interaction should feel premium — add magnetic button effects and smooth page transitions. ``` > **📝 Ghi chú:** GSAP và Three.js có thể gây khó khăn cho Bolt trong lần đầu — nếu 3D hero bị lỗi, hãy prompt tiếp: *"Replace the Three.js hero with a GSAP-animated SVG background instead."* Horizontal scroll section cần test kỹ trên touchscreen vì hay bị conflict với native scroll của mobile. --- ## 9. Trang Landing Cho Mobile App ``` Create a mobile app landing page in Vietnamese for a personal finance management app targeting Vietnamese millennials, using Next.js 14, Tailwind CSS, and Framer Motion. The app name is "VíThông Minh". Use a gradient color scheme from violet (#7C3AED) to blue (#2563EB) with white text. Include these sections: a hero section with app name, tagline about smarter money management, animated app screenshot mockups showing iPhone and Android frames side by side, and App Store / Google Play download buttons, a features section with 4 key features (expense tracking, budget goals, bill reminders, spending insights) using animated feature cards with mock app screenshots, a "How it works" section with 3-step visual flow (Tạo tài khoản → Kết nối ngân hàng → Theo dõi chi tiêu), a stats section (số người dùng, giao dịch theo dõi, tiết kiệm trung bình), an app screenshot carousel/slider section, a user testimonials section with avatar and quote cards, a security & privacy reassurance section with shield icons, a FAQ accordion, and a final download CTA section with email waitlist signup form. Add smooth entrance animations on all sections. ``` > **📝 Ghi chú:** App Store và Google Play download buttons cần được link đến URL thật của app sau khi publish. Phần "Kết nối ngân hàng" là điểm nhạy cảm với người dùng Việt — hãy bổ sung thêm nội dung về bảo mật (mã hóa 256-bit, không lưu mật khẩu) để tăng trust. --- ## 10. Trang FAQ + Pricing Cho Startup ``` Build a clean and conversion-optimized FAQ and Pricing page in Vietnamese for a B2C SaaS startup offering online tutoring platform (nền tảng gia sư trực tuyến), using React + Vite, Tailwind CSS, and shadcn/ui components. Use a fresh, trustworthy color scheme: teal (#0D9488) primary with white and light gray backgrounds. The page must include: a hero section with clear headline about transparent pricing and a trust badge, a pricing section with 3 plans (Cơ bản/Nâng cao/Gia đình) displayed as cards with monthly/yearly toggle (yearly shows 20% discount badge), each card listing features as checkmarks with a clear "Bắt đầu miễn phí" or "Mua ngay" CTA button, a full feature comparison table below the cards for desktop view that collapses to accordion on mobile, a "Most Popular" highlighted plan with a gradient border, a money-back guarantee badge section, an FAQ accordion section with minimum 10 questions covering billing, cancellation, refunds, feature access, and technical support — all answered in Vietnamese natural conversational tone, a customer support CTA section linking to live chat and email, and a final conversion banner. Implement smooth accordion animations and ensure WCAG AA accessibility standards. ``` > **📝 Ghi chú:** Toggle monthly/yearly pricing là tính năng hay bị Bolt generate sai state — nếu giá không đổi khi toggle, hãy kiểm tra lại logic `useState` và đảm bảo giá yearly = giá monthly × 12 × 0.8. Bảng so sánh tính năng trên mobile rất dễ bị overflow, cần test responsive kỹ hoặc yêu cầu Bolt dùng horizontal scroll wrapper. --- ## 💡 Mẹo Dùng Prompt Hiệu Quả Hơn | Tình huống | Cách xử lý | |---|---| | Bolt sinh ra UI nhưng thiếu section | Prompt thêm: *"Add the missing [section name] section after [existing section]"* | | Font chữ tiếng Việt bị lỗi | Thêm vào cuối prompt: *"Use Google Font 'Be Vietnam Pro' for all Vietnamese text"* | | Cần đổi màu sắc thương hiệu | Prompt: *"Replace all primary colors with [hex code] throughout the entire project"* | | Muốn thêm dark mode | Prompt: *"Add a dark/light mode toggle to the navigation bar"* | | Animation quá chậm/nhanh | Prompt: *"Adjust all Framer Motion animation duration to 0.4s with ease-out"* | | Form chưa có validation | Prompt: *"Add React Hook Form + Zod validation to all form fields with Vietnamese error messages"* | --- > **⚠️ Lưu ý chung:** Tất cả prompt được thiết kế cho **Bolt.new** với model mặc định. Nếu kết quả chưa đúng ý, hãy iterate bằng cách prompt tiếp trong cùng session thay vì bắt đầu lại — Bolt giữ context của toàn bộ codebase đã sinh ra.