please upgrade the ui ux and whole code :

<?php
$title = "SkyPulse IT Services";
$description = "Leading the way in IT solutions with innovation and excellence. Offering remote support, hardware repair, system architecture, and more.";
$aboutContent = "At SkyPulse.uk, we transform the way businesses operate by providing cutting-edge IT solutions focused on customer satisfaction and tailored to meet your unique needs.";
$services = [
    ["icon" => "headset", "title" => "Remote Customer Support", "description" => "Efficient remote support via ticketing systems and professional emails for seamless customer assistance."],
    ["icon" => "tools", "title" => "Computer Hardware Repair & Upgrade", "description" => "Expert computer hardware repair and upgrades for optimal performance."],
    ["icon" => "file-medical-alt", "title" => "BSOD Diagnosis & Repair", "description" => "Specialized BSOD diagnosis and swift repair solutions for system stability."],
    ["icon" => "network-wired", "title" => "Windows System Architect", "description" => "Strategic architect optimizing Windows environments with Active Directory, RDP, and VPN."],
    ["icon" => "project-diagram", "title" => "Network Infrastructure Specialist", "description" => "Experienced in TCP/IP, LAN/WLAN, Wi-Fi, VPN, DHCP, Port Forwarding, Switching, and Routing."],
    ["icon" => "clone", "title" => "Digital Duplication", "description" => "Cloning and Resilient Backup & Recovery Mastery."]
];
$contactDescription = "Whether you have questions or need assistance, feel free to contact us. We're here to support your IT journey.";
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<?php echo htmlspecialchars($description); ?>">
    <meta name="keywords" content="IT Services, Remote Support, Hardware Repair, System Architecture, Network Specialist, Digital Duplication">
    <meta name="author" content="SkyPulse.uk">
    <title><?php echo htmlspecialchars($title); ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            padding-top: 56px;
        }
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }
        .jumbotron {
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://source.unsplash.com/1600x900/?technology') no-repeat center center;
            background-size: cover;
            color: #fff;
            height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .service-icon {
            font-size: 3em;
            color: #0d6efd;
            margin-bottom: 15px;
        }
        footer {
            background-color: #343a40;
            padding: 20px 0;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">SkyPulse.uk</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#aboutModal">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#servicesModal">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#contactModal">Contact</a></li>
                <li class="nav-item"><a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#privacyModal">Privacy Policy</a></li>
            </ul>
        </div>
    </div>
</nav>

<section class="jumbotron text-center">
    <div class="container">
        <h1 class="display-4"><?php echo htmlspecialchars($title); ?></h1>
        <p class="lead"><?php echo htmlspecialchars($description); ?></p>
    </div>
</section>

<!-- About Modal -->
<div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="aboutModalLabel">About Us</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><?php echo htmlspecialchars($aboutContent); ?></p>
            </div>
        </div>
    </div>
</div>

<!-- Services Modal -->
<div class="modal fade" id="servicesModal" tabindex="-1" aria-labelledby="servicesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="servicesModalLabel">Our Services</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row text-center">
                    <?php foreach ($services as $service): ?>
                        <div class="col-md-4 mb-4">
                            <div class='service-icon'><i class='fas fa-<?php echo $service["icon"]; ?>'></i></div>
                            <h4 class='mt-3'><?php echo $service["title"]; ?></h4>
                            <p><?php echo $service["description"]; ?></p>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Contact Modal -->
<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="contactModalLabel">Get in Touch</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><?php echo htmlspecialchars($contactDescription); ?></p>
                <form id="contactForm" method="post">
                    <div class="form-group mb-3">
                        <input type="text" class="form-control" name="name" placeholder="Name" required>
                    </div>
                    <div class="form-group mb-3">
                        <input type="email" class="form-control" name="email" placeholder="Email" required>
                    </div>
                    <div class="form-group mb-3">
                        <textarea class="form-control" name="message" rows="4" placeholder="Message" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Send Message</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Privacy Policy Modal -->
<div class="modal fade" id="privacyModal" tabindex="-1" aria-labelledby="privacyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="privacyModalLabel">Privacy Policy</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>This Privacy Policy outlines how SkyPulse IT Services collects, uses, and protects your information. We adhere to requirements set forth by Google AdSense.</p>
                <p>We collect user data to enhance our service and provide tailored advertisements. Your data privacy is a priority, and we implement security measures to safeguard information.</p>
                <p>For more details, please contact us directly at info@skypulse.uk.</p>
            </div>
        </div>
    </div>
</div>

<footer>
    <p>&copy; 2023 SkyPulse.uk - All Rights Reserved</p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // AJAX form submission
        $('#contactForm').on('submit', function(event) {
            event.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'contact.php', // Replace with your server script to handle contact form submission
                data: $(this).serialize(),
                success: function(response) {
                    alert('Message sent successfully!');
                    $('#contactModal').modal('hide');
                    $('#contactForm')[0].reset();
                },
                error: function() {
                    alert('There was an error, please try again later.');
                }
            });
        });
    });
</script>

</body>
</html>