<div class="pt-3 mt-4 text-center">
    <img class="d-block mx-auto mb-4" src="{root_URL}images/logoWhite.png" alt="" width="72" height="57">
    <h1 class="display-5 fw-bold">The Tempus Project</h1>
    <div class="col-lg-6 mx-auto px-2">
        <p class="lead mb-4">
            {SITENAME} allows you to quickly design, develop, and customize responsive mobile-first web applications.
        </p>
    </div>

    <div class="b-example-divider"></div>

    <div class="container px-1 py-4 p-sm-4">
        <p class="col-12 col-lg-8 offset-lg-2">
            Utilizing our in-house <a href="/home/libraries" class="text-decoration-none">libraries</a>, {SITENAME} provides a very basic PHP web application utilizing the MVC (Model View Controller) pattern, paired with Bootstrap for a robust front-end experience. {SITENAME} can be deployed on most server architecture in seconds and can be installed and customized within minutes. Paired with Bootstrap, the world's most popular front-end open source toolkit, you have a great platform to build just about anything.
        </p>
    </div>

    <div class="b-example-divider"></div>

    <div class="container pt-3 p-sm-4" id="hanging-icons">
        <h2 class="pb-2 border-bottom context-main-border">Includes many systems right oout of the box</h2>
        <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
            <div class="col d-flex align-items-start">
                <div
                    class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="fa-solid fa-user"></i>
                </div>
                <div>
                    <h3 class="fs-2">User Management</h3>
                    <p>From new user registrations to forgotten password recovery and everything in-between, the included authentication and authorization controls can handle all your needs and include groups with highly customizable permissions systems.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <div
                    class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="fa-solid fa-screwdriver-wrench"></i>
                </div>
                <div>
                    <h3 class="fs-2">Administration</h3>
                    <p>
                        Everything from your sitename and timezone to notifications and emails are a breeze with the included Admin panel. Out of the box you will have direct control over most of your application and you can easily expand or add new controls as you need.
                    </p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <div
                    class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="fa-regular fa-folder-open"></i>
                </div>
                <div>
                    <h3 class="fs-2">Plugins</h3>
                    <p>
                        One of the best features of {SITENAME} is the plugin functionality. Much of the system has been modeled to work as self-contained applications that work together. Many of the features available here are plugins aty their core.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="b-example-divider"></div>

    <div class="container pt-3 p-sm-4" id="icon-grid">
        <h2 class="pb-2 border-bottom context-main-border">Plugins</h2>
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
            <div class="col d-flex align-items-start">
                <i class="fa-solid fa-pen-nib fa-3x"></i>
                <div class="ps-3">
                    <h3 class="fw-bold mb-0 fs-4">Blog</h3>
                    <p>Whether its the companies transparency or your own need to share, our blog plugin makes it simple.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <i class="fa-solid fa-bug fa-3x"></i>
                <div class="ps-3">
                    <h3 class="fw-bold mb-0 fs-4">Bug Reports</h3>
                    <p>An unfortunate reality iis that every application has bugs, never leave your users without the ability to report them to you.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <i class="fa-solid fa-comment fa-3x"></i>
                <div class="ps-3">
                    <h3 class="fw-bold mb-0 fs-4">Comments</h3>
                    <p>Allowing users the opportunity to share feedback is crucial. Our comments plugin not only integrates with the blog, but many other plugins to enable users to comment on any content you want.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <i class="fa-solid fa-envelope fa-3x"></i>
                <div class="ps-3">
                    <h3 class="fw-bold mb-0 fs-4">Contact</h3>
                    <p>A contact form is another simple but essential tool for your business or website.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <i class="fa-solid fa-file fa-3x"></i>
                <div class="ps-3">
                    <h3 class="fw-bold mb-0 fs-4">Resume</h3>
                    <p>Whether you're looking for a new gig or just want an easy way for others to see your work, our resume plugin might be the key.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <i class="fa-solid fa-inbox fa-3x"></i>
                <div class="ps-3">
                    <h3 class="fw-bold mb-0 fs-4">Subscribe</h3>
                    <p>Building your list should always be a part of your application and services and it made as simple as can be with this plugin.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <i class="fa-solid fa-list fa-3x"></i>
                <div class="ps-3">
                    <h3 class="fw-bold mb-0 fs-4">WIP (Work in Progress)</h3>
                    <p>A light-weight and simple plugin that allows you to keep a running list of works in progress to share with site visitors..</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <i class="fa-brands fa-stripe fa-3x"></i>
                <div class="ps-3">
                    <h3 class="fw-bold mb-0 fs-4">Memberships / Payments</h3>
                    <p>Our membership plugin integrates with Stripe to allow incredibly simple membership setup and can be easily expanded to sell any of your products.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="b-example-divider"></div>
    <div class="container pt-3 p-sm-4">
        <h2 class="pb-2 border-bottom context-main-border">Light / Dark Modes</h2>
        <div class="d-lg-flex flex-lg-equal my-md-3 ps-md-3">
            <div class="col-12 col-lg-6 text-bg-dark text-white col-6 text-center overflow-hidden d-flex flex-column mb-3 mb-lg-0">
                <div class="my-3 py-3">
                    <h2 class="display-6">When you stick with the light</h2>
                    <p class="lead">everything looks great.</p>
                </div>
                <img class="bg-dark shadow-sm mx-auto d-flex mt-auto border-top border-light" src="{root_URL}images/lightMobile.png" alt="Light-mode mobile view" height="300" style="border-radius: 21px 21px 0 0;">
            </div>
            <div class="col-12 col-lg-6 bg-light text-dark col-6 text-center overflow-hidden d-flex flex-column">
                <div class="my-3 py-3">
                    <h2 class="display-6">But when you go to the dark side</h2>
                    <p class="lead">everything is just a bit better.</p>
                </div>
                <img class="bg-dark shadow-sm mx-auto d-flex mt-auto border-top border-dark" src="{root_URL}images/darkMobile.png" alt="Dark-mode mobile view" height="300" style="border-radius: 21px 21px 0 0;">
            </div>
        </div>
    </div>
    
</div>