tu est un ui/ux designer je souhaite que tu cree un style a ce code qui dois etre simulaire a celui celui de salesforce, meme style de boutton, font et autres

<body>
    <div class="page-wrapper">
        <div class="main-content">
            <h1 class="mb-4"><i class="fas fa-code-branch me-2"></i>Générateur de liens de branches</h1>
            <div class="mb-3">
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-code"></i></span>
                    <input type="text" class="form-control" id="branchInput"
                        placeholder="Entrez le nom de la branche (ex: Bug/B-0001/B-0001)">
                    <button class="btn btn-primary" onclick="generateLinks()"><i class="fas fa-magic me-2"></i>Générer
                        les liens</button>
                </div>
            </div>
            <div id="output" class="mt-4"></div>
        </div>
        <div class="sidebar d-flex flex-column">
            <div>
                <h2 class="h5 mb-3">Branches principales</h2>
                <ul class="list-unstyled" id="sidebar">
                    <li><a href="#" class="btn btn-outline-light btn-sm mb-2 w-100 text-start" data-branch="QA"
                            target="_blank"><i class="fas fa-code-branch me-2"></i>QA</a></li>
                    <li><a href="#" class="btn btn-outline-light btn-sm mb-2 w-100 text-start" data-branch="UAT"
                            target="_blank"><i class="fas fa-code-branch me-2"></i>UAT</a></li>
                    <li><a href="#" class="btn btn-outline-light btn-sm mb-2 w-100 text-start" data-branch="UAT4"
                            target="_blank"><i class="fas fa-code-branch me-2"></i>UAT4</a></li>
                    <li><a href="#" class="btn btn-outline-light btn-sm mb-2 w-100 text-start"
                            data-branch="PREPRODUCTION" target="_blank"><i
                                class="fas fa-code-branch me-2"></i>PREPRODUCTION</a></li>
                    <li><a href="#" class="btn btn-outline-light btn-sm mb-2 w-100 text-start" data-branch="PRODUCTION"
                            target="_blank"><i class="fas fa-code-branch me-2"></i>PRODUCTION</a></li>
                    <li><a href="#" class="btn btn-outline-light btn-sm mb-2 w-100 text-start" data-branch="master"
                            target="_blank"><i class="fas fa-code-branch me-2"></i>master</a></li>
                </ul>
                <h2 class="h5 mb-3 mt-4">Historique</h2>
                <ul class="list-unstyled" id="history"></ul>
                <button class="btn btn-secondary btn-sm w-100 mt-2 mb-3" onclick="clearHistory()"><i
                        class="fas fa-trash me-2"></i>Vider l'historique</button>
            </div>
            <div class="mt-auto">
                <h2 class="h5 mb-3">URL du site</h2>
                <div class="input-group mb-3">
                    <span class="input-group-text"><i class="fas fa-globe"></i></span>
                    <input type="text" class="form-control" id="siteInput" placeholder="URL du site"
                        value="15.236.58.56:8080">
                </div>
            </div>
        </div>
    </div>
</body>