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">{{ home_field[0]["hero_text_highlight"] }}</p>
            <p class="text-light mx-auto description">{{ home_field[0]["hero_text_description"] }}</p>

            <button id="demo-btn" type="button"
                class="mt-5 btn-amics-green animate__animated animate__pulse animate__infinite fw-bold">
                {{ home_field[0]["button_text"] }}
            </button>

        </div>

        {{ home_field[0]["hero_video"]}}
        <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>

        {{ /home_field[0]["hero_video"]}}


    </div>
</div>

<!-- Product Features Section -->
<section class="section features bg-white px-6">

    <h1 class="text-center text-highlight">The ultimate integration platform behind every connection</h1>
    <div class="d-flex flex-row justify-content-evenly" style="margin-bottom: 124px;">
        <div class="amics-logo">
            <img class="img-fluid" src="../assets/images/amics-logo1.png" />
        </div>
        <div class="amics-logo">
            <img class="img-fluid" src="../assets/images/amics-logo2.png" />
        </div>
        <div class="amics-logo">
            <img class="img-fluid" src="../assets/images/amics-logo3.png" />
        </div>
    </div>

    <h1 class="text-start text-md-end logo-text-highlight">
        <img class="img-fluid d-block d-md-inline mx-auto" src="../assets/images/amics-logo1.png" />
        Corporate Management System
    </h1>
    <h2 class="text-start text-md-end text-secondary2 text-highlight3">Amplify the worth of your <br /> time by
        minimising repetative task</h2>
    <h5 class="text-start text-secondary2 text-highlight4">Customizable software solutions designed to
        help organizations efficiently<br />
        manage employee data and streamline HR operations.</h5>

    <div class="row feature-container">

        {{ counter = 1 }}
        {{ home_field[0]["feature"] }}
            
        {{ if counter < 4 }}

                <div class="col-12 col-md-4 feature">
                    <img src="../assets/images/wallpaper1.jpg" alt="...">
                    <div class="card-body">
                        <h5 class="card-title fw-bolder">{{ title }} </h5>
                        <p class="card-text text-secondary2">{{ description }}</p>
                    </div>
                </div>

            {{ endif }}

            {{ counter = counter + 1}}
            
        {{ /home_field[0]["feature"] }}

    </div>

    <div class="collapse" id="moreFeature">
        <div class="row feature-container">

            {{ counter = 1 }}
            {{ home_field[0]["feature"] }}

                {{ if counter > 3 }}

                    <div class="col-12 col-md-4 feature">
                        <img src="../assets/images/wallpaper1.jpg" alt="...">
                        <div class="card-body">
                            <h5 class="card-title fw-bolder">{{ title }} </h5>
                            <p class="card-text text-secondary2">{{ description }}</p>
                        </div>
                    </div>

                {{ endif }}

                {{ counter = counter + 1}}
                
            {{ /home_field[0]["feature"] }}

        </div>
    </div>

    <div class="d-flex">
        <button class="btn-amics fw-bold mx-auto" type="button" data-bs-toggle="collapse" data-bs-target="#moreFeature">
            Explore More
        </button>
    </div>

</section>

<section class="section2 features">
    <div class="px-6 inner">

        <h1 class="text-start text-md-end text-light logo-text-highlight">
            <img class="img-fluid d-block d-md-inline mx-auto" src="../assets/images/amics-logo2.png" />
            Investment Relation System
        </h1>

        <h2 class="text-start text-highlight3">Streamline System Elevation for
            thousands of Applications Every day</h2>
        <h5 class="text-start text-md-end text-highlight4 mx-auto">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 perks-container">

            {{ counter = 1 }}
            {{ home_field[0]["perks"] }}

                {{ if counter < 4 }}

                        <div class="col-12 col-md-4 perks">
                            <img src="../assets/images/wallpaper1.jpg" alt="...">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title fw-bolder">{{ title }} </h5>
                                <p class="card-text text-secondary2 mt-auto">{{ description }}</p>
                            </div>
                        </div>
                    
                {{ endif }}

                {{ counter = counter + 1}}
                
            {{ /home_field[0]["perks"] }}

        </div>

        <div class="collapse" id="morePerk">
            <div class="row perks-container">

                {{ counter = 1 }}
                {{ home_field[0]["perks"] }}

                    {{ if counter > 3 }}

                        <div class="col-12 col-md-4 perks">
                            <img src="../assets/images/wallpaper1.jpg" alt="...">
                            <div class="card-body">
                                <h5 class="card-title fw-bolder">{{ title }} </h5>
                                <p class="card-text text-secondary2">{{ description }}</p>
                            </div>
                        </div>

                    {{ endif }}

                    {{ counter = counter + 1}}
                    
                {{ /home_field[0]["perks"] }}

            </div>
        </div>

        <div class="d-flex pb-5">
            <button class="btn-amics fw-bold mx-auto text-light" type="button" data-bs-toggle="collapse"
                data-bs-target="#morePerk">
                Explore More
            </button>
        </div>

    </div>

</section>

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

    <h1 class="text-start text-md-end logo-text-highlight">
        <img class="img-fluid d-block d-md-inline mx-auto" src="../assets/images/amics-logo2.png" />
        Land and Estate management system
    </h1>

    <h2 class="text-secondary text-start text-md-end" style="text-align: center;margin-bottom: 45px;">Find “Hide and
        Seek” </br> files in no time</h2>

    <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-12 col-md-6 d-flex">
            <img src="../assets/images/wallpaper9.jpg" class="card-img-top mx-auto" alt="..." style="width: 90%;">
        </div>
        <div class="col-12 col-md-6 d-flex flex-column">
            <div class="my-auto">
                <h4 class="text-highlight3">Centralised Land and Estate</br> Database Management</h4>
                <p class="text-secondary text-highlight4">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>
                <div class="text-center text-md-start">
                    <button type="button" class="btn-amics fw-bold mb-5 mb-md-0">Explore More</button>
                </div>
            </div>


        </div>
    </div>

</section>

<section class="section4">
    <div class="px-6 inner">
        <h2 class="text-start text-md-center text-white text-highlight">
            Trusted Platfrom for Asset Investment
        </h2>
        <h2 class="text-start text-md-end text-secondary text-highlight2">
            We are always here for you
        </h2>
        <div style="width: 100%; padding-bottom: 250px;">
            <!-- Slider main container -->
            <div class="swiper">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
                    </div>
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>

                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

                <!-- If we need scrollbar -->
                <div class="swiper-scrollbar"></div>
            </div>
        </div>

    </div>

</section>

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

    <div class="row text-center">

        <div class="col-12 col-md-3 mx-auto">
            <img class="main-img" src="../assets/images/logo-invest-pahang.jpg" alt="...">
        </div>

        <h2 class="title">INVEST PAHANG</h2>

        <h3 class="mx-auto quote">“With the Digital Suite, the investment process is improved and streamlined. Filtering
            and choosing good investors is easier. Subsequently, it increases revenue for the state.”</h3>

    </div>

</section>

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

    <div class="d-flex flex-column flex-md-row justify-content-center mb-5" style="gap: 50px;">
        <div class="text-end">
            <h2>Plans & Pricng</h2>
            <h5 class="text-primary2">Nemo enim ipsam</h5>
        </div>
        <div class="text-end d-flex">
            <h5 class="m-0 my-auto text-secondary2">Nemo enim ipsam voluptatem quia voluptas sit</br> aspernatur aut
                odit aut fugit.</h5>
        </div>
    </div>

    <div class="d-flex flex-column flex-md-row container-fluid px-6" style="gap: 35px;">
        <div>
            <div class="pricing-card p-5">
                <h5 class="" style="font-weight: 500;">Professional</h5>
                <hr class="my-4">
                </hr>
                <ul>
                    <li>Lorem Ipsum Dolor</li>
                    <li>Lorem Ipsum Dolor</li>
                    <li>Lorem Ipsum Dolor</li>
                    <li>Lorem Ipsum Dolor</li>
                </ul>
                <hr class="my-4">
                </hr>
                <p class="pricepoint">
                    <span class="text-secondary fw-bold">RM 99.90</span> /
                    <span class="text-secondary2 fw-bold me-2">Month</span>
                    <button type="button" class="btn-amics-small fw-bold mx-auto" style="color: #000;">Start Free
                        Trial</button>
                </p>
                <video width="400%" class="position-absolute" autoplay muted loop playsinline
                    style="filter: brightness(50%); top:0; left:0; z-index: -1;">
                    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
        <div>
            <div class="pricing-card middle p-5">
                <h5 class="" style="font-weight: 500;">Professional</h5>
                <hr class="my-4">
                </hr>
                <ul>
                    <li>Lorem Ipsum Dolor</li>
                    <li>Lorem Ipsum Dolor</li>
                    <li>Lorem Ipsum Dolor</li>
                    <li>Lorem Ipsum Dolor</li>
                </ul>
                <hr class="my-4">
                </hr>
                <p class="pricepoint">
                    <span class="text-secondary fw-bold">RM 99.90</span> /
                    <span class="text-secondary2 fw-bold me-2">Month</span>
                    <button type="button" class="btn-amics-small fw-bold mx-auto" style="color: #000;">Start Free
                        Trial</button>
                </p>
                <video width="400%" class="position-absolute" autoplay muted loop playsinline
                    style="filter: brightness(50%); top:0; left:0; z-index: -1;">
                    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
        <div>
            <div class="pricing-card p-5">
                <h5 class="" style="font-weight: 500;">Professional</h5>
                <hr class="my-4">
                </hr>
                <ul>
                    <li>Lorem Ipsum Dolor</li>
                    <li>Lorem Ipsum Dolor</li>
                    <li>Lorem Ipsum Dolor</li>
                    <li>Lorem Ipsum Dolor</li>
                </ul>
                <hr class="my-4">
                </hr>
                <p class="pricepoint">
                    <span class="text-secondary fw-bold">RM 99.90</span> /
                    <span class="text-secondary2 fw-bold me-2">Month</span>
                    <button type="button" class="btn-amics-small fw-bold mx-auto" style="color: #000;">Start Free
                        Trial</button>
                </p>
                <video width="400%" class="position-absolute" autoplay muted loop playsinline
                    style="filter: brightness(50%); top:0; left:0; z-index: -1;">
                    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
    </div>

    <div class="container-fluid d-flex position-relative mt-5 px-6">

        <div class="d-flex flex-column flex-md-row container-fluid p-0" style="gap:20px">

            <div class="flex-grow-1 position-relative">
                <input id="pricng-email-input2" type="text" class="form-control" placeholder="Pay Monthly">
                <button type="button" class="btn-amics-small fw-bold mx-auto position-absolute"
                    style="top: 2.5px;right: 2px;color: #000;">Pay Yearly (Save RM 30)</button>
            </div>

            <div class="px-5">
                <p class="text-secondary2 text-start p-small m-0">*Yearly discount available on select plans Prices may
                    vary by your store location.</p>
            </div>

            <button type="button" class="btn-amics-small fw-bold mx-auto" style="background-color: #D4AF37;">Full List
                of Feature</button>


        </div>

    </div>



</section>

<section class="pricing-section2" style="background-image: linear-gradient(to right, #FFF , #EAEAEA);">
    <div class="px-6 py-5"
        style="padding-top:130px;border-radius: 140px 140px 0 0;transform: translateY(1.5%);background: #EAEAEA">
        <h2 class="text-end" style="margin-bottom: 50px;">
            What every plans you get
        </h2>

        <p class="text-start text-secondary2 mx-auto" style="width: 100%;margin-bottom: 50px;">Sed ut perspiciatis unde
            omnis iste natus error sit voluptatem accusantium </br> doloremque laudantium, totam rem aperiam.</p>

        <div class="d-flex mb-5">
            <button type="button" class="btn-amics-small fw-bold ms-auto" style="color:#000">Start Free Trial</button>
        </div>

        <div class="d-flex flex-column flex-md-row">
            <div class="p-2">
                <div class="plan-feature-card">
                    <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
                    <p class="p-small fw-bold">Lorem Ipsum</p>
                    <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
                </div>
            </div>
            <div class="p-2">
                <div class="plan-feature-card">
                    <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
                    <p class="p-small fw-bold">Lorem Ipsum</p>
                    <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
                </div>
            </div>
            <div class="p-2">
                <div class="plan-feature-card">
                    <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
                    <p class="p-small fw-bold">Lorem Ipsum</p>
                    <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
                </div>
            </div>
            <div class="p-2">
                <div class="plan-feature-card">
                    <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
                    <p class="p-small fw-bold">Lorem Ipsum</p>
                    <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
                </div>
            </div>
            <div class="p-2">
                <div class="plan-feature-card">
                    <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
                    <p class="p-small fw-bold">Lorem Ipsum</p>
                    <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="pricing-section3">
    <div class="trial-banner bg-dark">
        <div class="px-6 pt-5 pb-4 d-flex flex-row flex-reap justify-content-between" style="background: linear-gradient(to left, #D4AF37 40%, #001F3F 80%);
">
            <h3>START YOUR FREE TRIAL NOW <i class="bi bi-arrow-right-circle ms-2"></i></h3>
            <h3>START YOUR FREE TRIAL NOW <i class="bi bi-arrow-right-circle ms-2"></i></h3>
            <h3>START YOUR FREE TRIAL NOW <i class="bi bi-arrow-right-circle ms-2"></i></h3>
        </div>

    </div>
</section>

<section class="pricing-section4">
    <div class="px-6">
        <h5 class="text-primary2 text-end">Subscription</h5>
        <h1 class="text-end" style="margin-bottom: 20px;">Everything you need to</br> sell online, all in one place.
        </h1>
        <p class="text-secondary2 text-end" style="margin-bottom: 100px;">Whether you’re building a website, managing
            inventory, or responding </br>to customers, you can do it all with AIMS.
        </p>
        <div class="row" style="margin-bottom: 70px;">

            <div class="col-12 col-md-6">
                <p class="text-secondary2 p-small">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam voluptua.
                </p>
            </div>

            <div class="col-12 col-md-6">
                <div class="flex-grow-1 position-relative">
                    <input id="pricng-email-input2" type="text" class="form-control"
                        placeholder="Enter Your Email Address">
                    <button type="button" class="btn-amics-small fw-bold mx-auto position-absolute"
                        style="top: 2.5px;right: 2px;color: #000;">Start Free Trial</button>
                </div>
            </div>

        </div>
    </div>
</section>