Asymmetrik/ngx-starter

<p class="lead">
    Before you start, it’s important to understand the basic functionality and behavior of the
    application.
</p>

<p>
    Welcome to {{ appName() }}! Here you’ll find documentation about the application as well as
    pointers to other available resources. Navigate topic areas in the Help using the links in the
    left column.
    <!-- Will want to add a link to our help site and our email (which should both be configurable) -->
</p>

<div class="callout callout-info">
    <h4>Browser Recommendation</h4>
    <span class="fa-brands fa-3x fa-firefox"></span>
    <span class="mx-3 fs-1">Firefox</span>
    <span class="fa-brands fa-3x fa-chrome ms-3"></span>
    <span class="mx-3 fs-1">Chrome</span>
    <p>
        {{ appName() }} is designed to work in all modern browsers, and is optimized for Firefox and
        Chrome.
    </p>
</div>

<div class="callout callout-info mb-0">
    <h4>Looking for help?</h4>
    <p>
        Help is also located throughout the app. Whenever you see this icon:
        <a class="no-href btn-icon inline-help-label">
            <span class="fa-solid fa-question-circle help-icon"></span>
        </a>
        , you can click to receive a tooltip.
    </p>
    <p>
        You can get back to this Help at any time by clicking on the question mark icon
        <span class="fa-solid fa-question-circle help-icon"></span> in the left-hand navigation of
        the site.
    </p>
</div>

@if (externalLinks().length > 0) {
    <div class="mt-3">
        <h3>External Resources</h3>
        <external-links [links]="externalLinks()" />
    </div>
}