amics/resources/views/pricing.antlers.html

<!-- Video Player Section -->
<div class="container-fluid p-0">
    <div class="p-0 position-relative d-flex flex-column pricing-hero-section">

        <div class="mx-auto my-auto text-center">
            <h2 class="text-light fw-bold">The Ultimate Platform to</br> Maximise Asset Potential</h2>
            <p class="text-light">Harness the Full Force of Innovation in every aspect of operation</p>
        </div>

        <div class="position-absolute d-flex flex-column flex-md-row container-fluid"
            style="gap: 35px;width: 80%; left: 50%; bottom: 20%; transform: translateX(-50%);">

            <div class="flex-grow-1 ms-5 position-relative">
                <input id="pricng-email-input" type="text" class="form-control" placeholder="Enter your email address"
                    style="background-color: rgba(255, 255, 255, 0.2);border: none; padding: 28px 50px; border-radius: 50px;">
                <button type="button" class="btn-amics-small fw-bold mx-auto position-absolute"
                    style="top: 10px;right: 10px;">Start Free Trial</button>
            </div>

            <div style="max-width: 50%;">
                <p class="text-light text-start p-small m-0">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>

    </div>
</div>

<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>