TopDev
#Học Lập Trình

Hướng dẫn tạo website bằng AI

minhdev 📖 7 phút đọc

Dưới đây là Prompt :

bạn là chuyên gia thiết kế website, lập trình html css boostrap javascript , hãy thiết kế landing page cho website voduong.vn với nội dung sau : Phần mềm quản lý võ đường miễn phí - voduong.vn

  • Quản lý các CLB thuộc võ đường

  • Quản lý võ sinh : khóa học, lớp học

  • Điểm danh võ sinh

  • Thu học phí , nhắc học phí

  • Bán hàng : quản lý kho hàng, mua bán, lãi lỗ

  • Chi phí: quản lý chi tiêu của võ đường

  • Chấm thi: kiểm tra, chấm thi lên đai

  • Tạo website riêng cho võ đường

  • Tuyển sinh online, võ sinh đk tham gia online

Và Đây là Kết Quả : https://voduong.vn/

Chào bạn, tôi rất sẵn lòng giúp bạn. Với yêu cầu thiết kế một Landing Page chuyên nghiệp, hiện đại và tập trung vào chuyển đổi cho phần mềm Voduong.vn, tôi sẽ sử dụng Bootstrap 5 (phiên bản mới nhất) kết hợp với HTML5/CSS3 và một chút Javascript để tạo hiệu ứng.

Dưới đây là bản thiết kế hoàn chỉnh. Bạn có thể lưu thành file index.html và chạy trực tiếp.

1. Phân tích thiết kế & Ý tưởng#

  • Màu sắc chủ đạo: Xanh dương đậm (Tin cậy/Công nghệ) kết hợp với màu Cam/Đỏ (Năng lượng võ thuật).

  • Bố cục: Hero Section: Tiêu đề lớn nhấn mạnh chữ "Miễn phí" và hình ảnh minh họa. Features Grid: Lưới 3x3 để trình bày 9 tính năng bạn yêu cầu một cách rõ ràng.

    • CTA (Call to Action): Nút đăng ký nổi bật xuyên suốt.

2. Mã nguồn (Source Code)#

Hãy sao chép toàn bộ đoạn mã dưới đây:

`

Voduong.vn - Phần mềm quản lý võ đường miễn phí 
<style>
    :root {
        --primary-color: #0d6efd;
        --accent-color: #ff6b00;
        --dark-bg: #1a1a1a;
    }

    body {
        font-family: 'Roboto', sans-serif;
        color: #333;
    }

    h1, h2, h3, h4, .navbar-brand {
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
    }

    /* Navbar */
    .navbar {
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .navbar-brand span {
        color: var(--primary-color);
    }

    /* Hero Section */
    .hero-section {
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1555597673-b21d5c935865?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
        background-size: cover;
        background-position: center;
        color: white;
        padding: 100px 0;
        min-height: 80vh;
        display: flex;
        align-items: center;
    }
    
    .hero-btn {
        background-color: var(--accent-color);
        border: none;
        padding: 15px 40px;
        font-size: 1.2rem;
        font-weight: bold;
        transition: transform 0.3s;
    }
    .hero-btn:hover {
        background-color: #e65100;
        transform: translateY(-3px);
        color: white;
    }

    /* Feature Cards */
    .feature-card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        height: 100%;
        padding: 20px;
        background: white;
    }
    
    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }

    .icon-box {
        width: 60px;
        height: 60px;
        background-color: rgba(13, 110, 253, 0.1);
        color: var(--primary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 20px;
    }

    /* Call to Action */
    .cta-section {
        background-color: var(--primary-color);
        color: white;
        padding: 60px 0;
    }

    /* Footer */
    footer {
        background-color: var(--dark-bg);
        color: #aaa;
        padding: 40px 0;
    }
    footer h5 {
        color: white;
        margin-bottom: 20px;
    }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
    <div class="container">
        <a class="navbar-brand fs-3 fw-bold" href="#">VODUONG<span>.VN</span></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto align-items-center">
                <li class="nav-item"><a class="nav-link" href="#features">Tính năng</a></li>
                <li class="nav-item"><a class="nav-link" href="#about">Giới thiệu</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">Liên hệ</a></li>
                <li class="nav-item ms-lg-3">
                    <a href="#" class="btn btn-outline-primary me-2">Đăng nhập</a>
                    <a href="#" class="btn btn-primary">Đăng ký ngay</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<header class="hero-section text-center text-lg-start">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold mb-4">Giải Pháp Quản Lý Võ Đường <span style="color: var(--accent-color);">Miễn Phí</span> & Toàn Diện</h1>
                <p class="lead mb-4">
                    Đơn giản hóa việc quản lý CLB, võ sinh, học phí và tài chính. 
                    Tập trung vào chuyên môn giảng dạy, hãy để <strong>voduong.vn</strong> lo phần vận hành.
                </p>
                <a href="#register" class="btn hero-btn rounded-pill text-white">
                    <i class="fas fa-rocket me-2"></i> Dùng Thử Miễn Phí
                </a>
                <div class="mt-4 text-white-50">
                    <small><i class="fas fa-check-circle me-1"></i> Không cần cài đặt</small>
                    <small class="ms-3"><i class="fas fa-check-circle me-1"></i> Bảo mật dữ liệu</small>
                </div>
            </div>
            <div class="col-lg-6 d-none d-lg-block text-center">
               <img src="https://cdni.iconscout.com/illustration/premium/thumb/martial-arts-class-illustration-download-in-svg-png-gif-file-formats--karate-training-kick-boxing-sports-activities-pack-sport-illustrations-5349692.png" alt="Phần mềm quản lý võ đường" class="img-fluid" style="max-height: 500px;">
            </div>
        </div>
    </div>
</header>

<section id="features" class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Tính Năng Nổi Bật</h2>
            <p class="text-muted">Mọi công cụ bạn cần để vận hành võ đường chuyên nghiệp</p>
        </div>

        <div class="row g-4">
            <div class="col-md-6 col-lg-4">
                <div class="feature-card">
                    <div class="icon-box"><i class="fas fa-sitemap"></i></div>
                    <h4>Quản lý Hệ thống CLB</h4>
                    <p class="text-muted">Quản lý tập trung nhiều câu lạc bộ, chi nhánh thuộc võ đường trên cùng một hệ thống duy nhất.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="feature-card">
                    <div class="icon-box"><i class="fas fa-users"></i></div>
                    <h4>Quản lý Võ Sinh</h4>
                    <p class="text-muted">Lưu trữ hồ sơ chi tiết, phân chia theo khóa học, lớp học và cấp đai. Tra cứu thông tin dễ dàng.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="feature-card">
                    <div class="icon-box"><i class="fas fa-calendar-check"></i></div>
                    <h4>Điểm Danh Thông Minh</h4>
                    <p class="text-muted">Điểm danh võ sinh nhanh chóng qua App hoặc QR Code. Theo dõi chuyên cần chính xác.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="feature-card">
                    <div class="icon-box"><i class="fas fa-file-invoice-dollar"></i></div>
                    <h4>Quản lý Học Phí</h4>
                    <p class="text-muted">Tự động tính toán học phí, tạo phiếu thu và gửi thông báo nhắc đóng học phí tự động tới phụ huynh.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="feature-card">
                    <div class="icon-box"><i class="fas fa-shopping-cart"></i></div>
                    <h4>Kho & Bán Hàng</h4>
                    <p class="text-muted">Quản lý nhập xuất võ phục, dụng cụ tập luyện. Thống kê lãi lỗ bán hàng chi tiết.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="feature-card">
                    <div class="icon-box"><i class="fas fa-chart-pie"></i></div>
                    <h4>Quản lý Thu Chi</h4>
                    <p class="text-muted">Ghi chép mọi khoản chi tiêu của võ đường. Báo cáo tài chính minh bạch, rõ ràng.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="feature-card">
                    <div class="icon-box"><i class="fas fa-medal"></i></div>
                    <h4>Tổ Chức Chấm Thi</h4>
                    <p class="text-muted">Lên danh sách thi, chấm điểm, xét duyệt lên đai và in chứng chỉ trực tiếp trên phần mềm.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="feature-card">
                    <div class="icon-box"><i class="fas fa-globe"></i></div>
                    <h4>Website Riêng</h4>
                    <p class="text-muted">Tạo website giới thiệu võ đường chuyên nghiệp với tên miền riêng để quảng bá thương hiệu.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="feature-card">
                    <div class="icon-box"><i class="fas fa-laptop-house"></i></div>
                    <h4>Tuyển Sinh Online</h4>
                    <p class="text-muted">Form đăng ký trực tuyến, quản lý danh sách võ sinh đăng ký học và học online dễ dàng.</p>
                </div>
            </div>
        </div>
    </div>
</section>

[Image of martial arts software dashboard mockup]

<section class="cta-section text-center">
    <div class="container">
        <h2 class="mb-4">Sẵn sàng nâng tầm Võ đường của bạn?</h2>
        <p class="lead mb-4">Đăng ký ngay hôm nay để trải nghiệm phần mềm quản lý số 1 Việt Nam.</p>
        <button class="btn btn-light btn-lg rounded-pill px-5 fw-bold text-primary">Đăng Ký Miễn Phí Ngay</button>
    </div>
</section>

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4">
                <h5 class="text-white">VODUONG.VN</h5>
                <p>Giải pháp công nghệ toàn diện cho các võ đường, câu lạc bộ võ thuật tại Việt Nam.</p>
            </div>
            <div class="col-md-4 mb-4">
                <h5>Liên kết nhanh</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-decoration-none text-muted">Trang chủ</a></li>
                    <li><a href="#" class="text-decoration-none text-muted">Tính năng</a></li>
                    <li><a href="#" class="text-decoration-none text-muted">Bảng giá</a></li>
                    <li><a href="#" class="text-decoration-none text-muted">Hướng dẫn sử dụng</a></li>
                </ul>
            </div>
            <div class="col-md-4 mb-4">
                <h5>Liên hệ</h5>
                <ul class="list-unstyled">
                    <li><i class="fas fa-phone me-2"></i> 0909.xxx.xxx</li>
                    <li><i class="fas fa-envelope me-2"></i> hotro@voduong.vn</li>
                    <li><i class="fas fa-map-marker-alt me-2"></i> Hà Nội, Việt Nam</li>
                </ul>
            </div>
        </div>
        <hr class="border-secondary">
        <div class="text-center">
            <p class="mb-0">&copy; 2023 Voduong.vn. All rights reserved.</p>
        </div>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
</script>
`

3. Giải thích các thành phần kỹ thuật#

  • Bootstrap 5 Grid System: Tôi sử dụng col-md-6 col-lg-4 để tạo lưới 3 cột trên máy tính và 2 cột trên máy tính bảng, giúp 9 tính năng của bạn hiển thị cân đối.

  • FontAwesome: Sử dụng các icon trực quan (ví dụ: fa-medal cho chấm thi, fa-money-bill cho học phí) giúp người dùng nắm bắt nội dung nhanh hơn đọc chữ.

  • Typography (Google Fonts): Oswald: Phông chữ mạnh mẽ, nét đậm dùng cho Tiêu đề, tạo cảm giác "Võ thuật/Thể thao". Roboto: Phông chữ hiện đại, dễ đọc cho nội dung chi tiết.

  • Responsive: Giao diện tự động co giãn đẹp mắt trên cả điện thoại (Mobile) và máy tính.

  • UX Writing: Nội dung được viết lại ngắn gọn, tập trung vào lợi ích (VD: Thay vì chỉ viết "Điểm danh", tôi viết "Điểm danh thông minh" để tăng giá trị).

Bài liên quan trong #Học Lập Trình

✓ Đã sao chép link