@extends('backend.layout.masterlayout')
@section('content')
    @include('backend.partial.user-guide-sidebar')
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        h1,
        h2 {
            color: #333;
        }

        h1 {
            text-align: center;
        }

        .step {
            background-color: #fff;
            margin: 20px 0;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .step-header {
            background-color: #ffc107;
            padding: 10px;
            font-weight: bold;
            border-radius: 5px 5px 0 0;
        }

        .step-content {
            padding: 10px;
        }

        .instructions {
            margin: 10px 0;
        }

        ul {
            padding-left: 20px;
        }

        ul li {
            margin-bottom: 10px;
        }

        .footer {
            background-color: #ffc107;
            color: #000;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            padding: 10px 0;
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
        }
    </style>
    <div class="page-wrapper">
        <!--page-content-wrapper-->
        <div class="page-content-wrapper">
            <div class="page-content" style="padding:unset;">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <center><h4><b>Begin & Launch Website</b></h4></center>
                                <!-- Step 1 -->
                                <div class="step">
                                    <div class="step-header">Begin and Launch Website - Step 1</div>
                                    <div class="step-content">
                                        <p><strong>Launch complete website with prebuild theme:</strong> 1 minute to install
                                            prebuild theme and 1 click to enable theme.</p>
                                        <ul>
                                            <li>Go to <strong>"Themes"</strong> and install any theme of your choice.</li>
                                            <li>Enable installed theme from <strong>"Custom Theme"</strong> section.</li>
                                        </ul>
                                        <p>If third-party or own theme is used:</p>
                                        <ul>
                                            <li>Go to <strong>"Custom Theme"</strong> section and configure your own HTML
                                                Theme.</li>
                                        </ul>
                                        <p><strong>Result:</strong> Complete website is launched with dummy content.</p>
                                    </div>
                                </div>

                                <!-- Step 2 -->
                                <div class="step">
                                    <div class="step-header">Step 2: Replace Original Content with Dummy Content</div>
                                    <div class="step-content">
                                        <h6><b>In Header</b></h6>
                                        <p>Enable only the desired pages and categories of business for the site:</p>
                                        <ul>
                                            <li>Home</li>
                                            <li>About Us</li>
                                            <li>Clients</li>
                                            <li>Team (with designation and description)</li>
                                            <li>Facts (counters)</li>
                                            <li>Testimonials</li>
                                            <li>Photo Gallery (with category)</li>
                                            <li>Video Gallery (with category)</li>
                                            <li>Career (with categories and form)</li>
                                            <li>Contact Us (with map & enquiry form)</li>
                                        </ul>

                                        <h6><b>In Footer</b></h6>
                                        <p>Enable/Disable from <strong>"Menu & Pages"</strong> section:</p>
                                        <ul>
                                            <li>Privacy Policy</li>
                                            <li>Refund Policy</li>
                                            <li>Terms & Conditions</li>
                                            <li>Disclaimer</li>
                                            <li>Disclosure</li>
                                            <li>FAQ</li>
                                        </ul>
                                        <p>These are prebuilt pages with an option to edit as per the company's policy.</p>
                                    </div>
                                </div>

                                <p class="footer">Refer to the "User Guide" for step-by-step instructions on how to use the
                                    Admin Panel.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end page-content-wrapper-->
    </div>
    <!--end page-wrapper-->
    <!--start overlay-->
    <div class="overlay toggle-btn-mobile"></div>
    <!--end overlay-->
    <!--Start Back To Top Button-->
@endsection