amics/resources/views/home.antlers.html

<!-- Video Player Section -->
<div class="hero-section">
    <div class="p-0 position-relative">
        <div class="text-highlight px-1">
            <p class="title">The Ultimate Platform to Maximize Asset Potential</p>
            <p class="text-light mx-auto description">Harness the Full Force of Innovation in every aspect of operation</p>
        </div>
        <div class="position-absolute row" style="z-index: 10;bottom:15%;left: 50%;transform: translate(-50%,-50%); width: 100%; ">
            <div class="col-12 col-md-6">
                <p class="text-light text-center text-md-end p-small">Get 3 days free then</br> 1 month for RM 1</p>
            </div>
            <div class="col-12 col-md-6 text-center text-md-start">
                <a href="https://demo.amics.com.my/admin/login">
                    <button type="button" class="btn-amics-small fw-bold">Start Free Trial</button>
                </a>
                
            </div>
        </div>
        <video width="100%" autoplay muted loop playsinline>
            <source src="../assets/video/4010187-hd_1366_720_50fps.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>

    </div>
</div>

<!-- Product Features Section -->
<section class="section features bg-white px-6">
    <h1 class="text-center" style="margin-bottom: 124px;">The ultimate integration platform behind every connection</h1>
    <div class="d-flex flex-row justify-content-center" style="gap:114px;margin-bottom: 124px;">
        <div style="max-width: 250px;">
            <img class="img-fluid" src="../assets/images/amics-logo1.png" />
        </div>
        <div style="max-width: 250px;">
            <img class="img-fluid" src="../assets/images/amics-logo2.png" />
        </div>
        <div style="max-width: 250px;">
            <img class="img-fluid" src="../assets/images/amics-logo3.png" />
        </div>
    </div>

    <h1 class="text-end" style="margin-bottom: 50px;">
        <img class="img-fluid" style="vertical-align:middle;margin-right: 45px;max-width: 120px;vertical-align:middle;"
            src="../assets/images/amics-logo1.png" />

        Corporate Management System
    </h1>
    <h2 class="text-end text-secondary2" style="margin-bottom: 50px;">Amplify the worth of your <br /> time by
        minimising repetative task</h2>
    <h5 class="text-start text-secondary2" style="margin-bottom: 150px;">Customizable software solutions designed to
        help organizations efficiently<br />
        manage employee data and streamline HR operations.</h5>

    <div class="d-flex flex-row flex-wrap" style="gap:20px;margin-bottom: 115px;">
        <div class="card flex-grow-1" style="width: 18rem;">
            <img src="../assets/images/wallpaper2.jpg" class="card-img-top" style="margin-bottom: 45px;" alt="...">
            <div class="card-body">
                <h5 class="card-title fw-bolder">Attendance Management</h5>
                <p class="card-text text-secondary2">Allow staff to keep track of their working hours using fingerprint,
                    facial recognition and magnetic card readers.</p>
            </div>
        </div>
        <div class="card flex-grow-1" style="width: 18rem;">
            <img src="../assets/images/wallpaper4.jpg" class="card-img-top" style="margin-bottom: 45px;" alt="...">
            <div class="card-body">
                <h5 class="card-title fw-bolder">Absence and Leave Management</h5>
                <p class="card-text text-secondary2">Some quick example text to build on the card title and make up the
                    bulk of the
                    card's content.</p>
            </div>
        </div>
        <div class="card flex-grow-1" style="width: 18rem;">
            <img src="../assets/images/wallpaper6.jpg" class="img-fluid card-img-top"
                style="height: 100%;object-fit:cover;margin-bottom: 45px;" alt="...">
            <div class="card-body">
                <h5 class="card-title fw-bolder">Self-services (Employee)</h5>
                <p class="card-text text-secondary2">Some quick example text to build on the card title and make up the
                    bulk of the
                    card's content.</p>
            </div>
        </div>

    </div>

    <div class="d-flex">
        <button type="button" class="btn-amics fw-bold mx-auto">Explore More</button>
    </div>

</section>

<section class="section2 features" style="background-image: linear-gradient(to right, #D4AF37 , #001F3F);">
    <div class="px-6"
        style="padding-top:130px;border-radius: 140px 140px 0 0;transform: translateY(2%);background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,41,105,1) 70%, rgba(50,47,36,1) 100%);">
        <h1 class="text-center text-white" style="margin-bottom: 50px;">
            <img class="img-fluid"
                style="vertical-align:middle;margin-right: 45px;max-width: 120px;vertical-align:middle;"
                src="../assets/images/amics-logo2.png" />
            Investment Relation System
        </h1>

        <h2 class="text-start text-secondary2" style="width: 80%;margin-bottom: 50px;">Streamline System Elevation for
            thousands of Applications Every day</h2>
        <h5 class="text-end text-secondary2 mx-auto" style="width: 100%;margin-bottom: 50px;">Elevate your investor relations
            strategy with our specialized software. Manage investment<br /> applications, registration, and communication with
            stakeholders in a streamlined and<br /> compliant manner, ensuring transparency and trust.</h5>

        <div class="row d-none d-lg-flex">
            <div class="col-4">
                <div class="card w-100 text-white" style="background-color: rgba(0,0,0,0);">
                    <img src="../assets/images/wallpaper5.jpg" class="card-img-top" alt="..."
                        style="max-height: 500px;margin-bottom: 45px;">
                    <div class="card-body">
                        <h5 class="card-title text-white fw-bolder">Absence and Leave Management</h5>
                        <p class="card-text text-secondary2">Centralised repository for investor profiles, contact
                            details, and investment history.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card text-white" style="background-color: rgba(0,0,0,0);">
                    <img src="../assets/images/wallpaper6.jpg" class="card-img-top" alt="..."
                        style="max-height: 500px;object-fit: cover;margin-bottom: 45px;">
                    <div class="card-body">
                        <h5 class="card-title text-white fw-bolder">Absence and Leave Management</h5>
                        <p class="card-text text-secondary2">Management of lease documents such as contracts,
                            amendments, and correspondence related to the lease. Besides, customisable alert in order to
                            configure the system to send alerts via email, SMS, or within the system itself based on
                            predefined timelines before the lease expiration.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex" style="margin-top: 140px;padding-bottom: 250px;">
            <button type="button" class="btn-amics fw-bold mx-auto text-white">Explore More</button>
        </div>

    </div>

</section>

<section class="section3 features bg-white px-6">

    <h2 class="text-center" style="margin-bottom: 65px;">
        <img class="img-fluid" style="vertical-align:middle;margin-right: 45px;max-width: 120px;vertical-align:middle;"
            src="../assets/images/amics-logo2.png" />
        Land and Estate Management System
    </h2>
    <div class="d-flex" style="margin-bottom: 45px;">
        <h2 class="text-secondary ms-auto" style="text-align: center;">Find “Hide and Seek” </br> files in no time</h2>
    </div>
    <h5 class="text-start text-secondary" style="margin-bottom: 110px;">Customisable system that is designed to refine
        and optimise the management of real estate properties. One of the many features of this module is it captures
        the details and the information of the land grants; to whom they are issued, conditions and restrictions
        associated with the grant.</h5>

    <div class="row">
        <div class="col-6 d-flex">
            <img src="../assets/images/wallpaper9.jpg" class="card-img-top mx-auto" alt="..." style="width: 90%;">
        </div>
        <div class="col-6 d-flex flex-column">
            <div class="my-auto">
                <h4 style="margin-bottom: 30px;padding-left:30px;border-left: 5px solid rgb(212, 175, 55);">Centralised
                    Land and Estate</br> Database Management</h4>
                <p class="text-secondary" style="margin-bottom: 105px;">Provides a user-friendly interface for
                    authorised personnel to</br> input new
                    grant information, update existing records, and</br> query the database for specific information.
                </p>
                <button type="button" class="btn-amics fw-bold mx-auto">Explore More</button>
            </div>


        </div>
    </div>

</section>

<section class="section4" style="background-image: linear-gradient(to left, #D4AF37 , #001F3F);">
    <div class="px-6"
        style="border-radius: 140px 140px 0 0;transform: translateY(5%);background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,41,105,1) 70%, rgba(50,47,36,1) 100%);padding-top:80px;">
        <h2 class="text-center text-white" style="margin-bottom: 25px;">
            Trusted Platfrom for Asset Investment
        </h2>
        <h2 class="text-end text-secondary" style="margin-bottom: 110px;">
            We are always here for you
        </h2>

        <div class="d-flex" style="overflow: hidden;padding-bottom: 300px;">
            <div class="bg-danger" style="width: 250px; height: 50px;">
                <img src="../assets/images/investpahanglist.jpg" />
            </div>
        </div>

    </div>

</section>

<section class="section5 features bg-white px-6">

    <div class="row">

        <div class="col-3 mx-auto">
            <img src="https://st.depositphotos.com/1144472/2003/i/950/depositphotos_20030237-stock-photo-cheerful-young-man-over-white.jpg"
                class="card-img-top" alt="...">
        </div>

        <div class="col-7 mx-auto d-flex" style="flex-direction: column;">
            <div class="my-auto d-flex" style="flex-direction: column;">
                <i class="bi bi-quote text-primary2" style="font-size: 45px;"></i>
                <h5 class="text-dark mb-3">Pn Haslina Bahasan <span class="text-secondary2">(Chief Executive
                        Officer)</span> </h5>
                <p style="font-style: italic;">“With the Digital Suite, it improves and streamlines the<br />
                    investment process. Filtering in choosing good investors<br /> is easier. Subsequently, it increases
                    revenue for the<br /> state.”</p>
            </div>

            <div class="d-flex flex-row" style="gap:30px">
                <button class="btn btn-white round-btn shadow">
                    <i class="bi bi-chevron-left" style="font-size: 20px;"></i>
                </button>
                <h3 class="my-auto">1</h3>
                <button class="btn btn-white round-btn shadow" style="font-size: 20px;">
                    <i class="bi bi-chevron-right"></i>
                </button>
            </div>


        </div>
    </div>

</section>