CoreGradeWeb/app/Views/web/about.php

<?= $this->extend('web/layouts/master') ?>
<?= $this->section('content') ?>

    <!-- Page Header Start !-->
    <div class="page-breadcrumb-area" style="background-image: url('images/section-bg/page-header.png')">
        <div class="page-overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="te-breadcrumb-wrapper">
                        <div class="te-page-heading">
                            <h3 class="te-page-title">About Us</h3>
                        </div>
                        <div class="te-breadcrumb-list">
                            <ul>
                                <li><a href="/">Home</a></li>
                                <li class="active"><a href="#">About</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End !-->

    <!-- About Us Area Start !-->
    <div class="about-us-area style-1">
        <div class="container">
            <div class="row gy-4">
                <div class="col-lg-6">
                    <div class="te-about-image-card">
                        <div class="te-main-img-wrapper">
                            <div class="te-main-img-inner">
                                <img class="tilt-animate" src="/asset/images/about/about-card-3.jpg" alt="image" />

                                <div class="te-img-card-shape">
                                    <img class="tilt-animate" src="/asset/images/about/about-shape.png" alt="Shape" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 align-self-center">
                    <div class="te-about-info-card">
                        <div class="te-about-info-content">
                            <div class="te-section-title">
                                <div class="te-section-content">
<!--                                    <div>-->
<!--                                        <span class="short-title only-divider">Features</span>-->
<!--                                    </div>-->
                                    <h2 class="title">AI solutions <span>tailored</span> <br/> for startups</h2>
                                    <div class="te-section-desc">
                                        <p>It is a long established fact that a reader will be distracted by the readable contedable content of a page whennt of a page when looking at its layout. The point of using Lorem Ipsum</p>
                                    </div>
                                </div>
                            </div>
                            <div class="te-list-item-wrapper">
                                <div class="te-list-item">
                                    <span class="icon">
                                        <i class="fa-solid fa-angles-right"></i>
                                    </span>
                                    <span class="text">Startup with AI intelligence Making</span>
                                </div>
                                <div class="te-list-item">
                                    <span class="icon">
                                        <i class="fa-solid fa-angles-right"></i>
                                    </span>
                                    <span class="text">Power of AI for your startup</span>
                                </div>
                                <div class="te-list-item">
                                    <span class="icon">
                                        <i class="fa-solid fa-angles-right"></i>
                                    </span>
                                    <span class="text">AI solutions designed for startups</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- About Us Area End !-->
    <!-- Abour Area Start !-->
    <div class="about-feature-area">
        <div class="circle-drop-shadow"></div>
        <div class="container">
            <div class="row gy-4 align-items-center">
                <div class="col-lg-6 order-2 order-lg-1 wow animate__animated animate__slideInLeft animate__slow">
                    <div class="about-us-card">
                        <div class="te-section-title">
                            <div class="te-section-content">
<!--                                <div class="short-title-wrapper">-->
<!--                                    <span class="short-title">About Us</span>-->
<!--                                </div>-->
                                <h2 class="title">Technology It's not just the about the gadgets it's </h2>
                                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at</p>
                            </div>
                        </div>
                        <div class="te-list-item-wrapper">
                            <div class="te-list-item">
                                <div class="icon">
                                    <img src="/asset/images/icon/list-icon/icon-1.png" alt="icon">
                                </div>
                                <span class="text">OUR HISTORY</span>
                            </div>
                            <div class="te-list-item">
                                <div class="icon">
                                    <img src="/asset/images/icon/list-icon/icon-2.png" alt="icon">
                                </div>
                                <span class="text">OUR VISION</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-5  offset-xl-1 order-1 order-lg-2 wow animate__animated animate__zoomIn animate__slow">
                    <div class="image-card">
                        <img class="tilt-animate" src="/asset/images/about/about-card-1.jpg" alt="image">
                    </div>
                </div>
            </div>
            <div class="row gy-4 align-items-center mt-30">
                <div class="col-lg-6 col-xl-5 wow animate__animated animate__zoomIn animate__slow">
                    <div class="image-card">
                        <img class="tilt-animate"  src="/asset/images/about/about-card-2.jpg" alt="image">
                    </div>
                </div>
                <div class="col-lg-6 col-xl-6 offset-xl-1 wow animate__animated animate__slideInRight animate__slower">
                    <div class="about-us-card">
                        <div class="te-section-title">
                            <div class="te-section-content">
<!--                                <div class="short-title-wrapper">-->
<!--                                    <span class="short-title">Features</span>-->
<!--                                </div>-->
                                <h2 class="title">The Future Starts with AI</h2>
                                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at It is a long</p>
                            </div>
                        </div>
                        <div class="te-list-item-wrapper">
                            <div class="te-list-item">
                                <div class="icon">
                                    <img src="/asset/images/icon/list-icon/icon-1.png" alt="icon">
                                </div>
                                <span class="text">OUR HISTORY</span>
                            </div>
                            <div class="te-list-item">
                                <div class="icon">
                                    <img src="/asset/images/icon/list-icon/icon-2.png" alt="icon">
                                </div>
                                <span class="text">OUR VISION</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Abourt Area End !-->

<?= $this->endSection() ?>