<%- include('../partials/header') %>

<div class="container py-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="text-center mb-5">
                <h1 class="display-4 fw-bold" data-i18n="about_us_title"></h1>
                <div class="divider-cus mx-auto my-4"></div>
            </div>
            
            <div class="about-content text-cus" data-i18n-desc="about_us_content"></div>
            
            <div class="row mt-5 g-4">
                <div class="col-md-4">
                    <div class="stat-box text-center p-4 rounded-3 text-bg-dark">
                        <i class="icon fa-utility-fill fa-semibold fa-code fa-2x mb-3"></i>
                        <h3>5+</h3>
                        <p data-i18n="about.stat.experience"></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stat-box text-center p-4 rounded-3 text-bg-dark">
                        <i class="icon fa-utility-fill fa-semibold fa-user fa-2x mb-3"></i>
                        <h3>10+</h3>
                        <p data-i18n="about.stat.projects"></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stat-box text-center p-4 rounded-3 text-bg-dark">
                        <i class="icon fa-utility-fill fa-semibold fa-heart fa-2x mb-3"></i>
                        <h3>21+</h3>
                        <p data-i18n="about.stat.customers"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.divider-cus {
    width: 60px;
    height: 3px;
    background: var(--primary-color-cus, #0d6efd);
}
.stat-box {
    transition: transform 0.3s;
    border: 1px solid rgba(255,255,255,0.1);
}
.stat-box:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color-cus, #0d6efd);
}
.about-content {
    line-height: 1.8;
}
.about-content p {
    margin-bottom: 1.5rem;
}
</style>

<%- include('../partials/footer') %>