{% extends 'layout.html.twig' %}{% block meta_decription %} {{ parent() }}{% endblock %}{% block stylesheets %} {{ parent() }} <style> html,body{ width:100%; margin:0; height:100%; background: #fff !important; } </style>{% endblock %}{% block body %} <div class="hidden users-flash mb-0" id="flash"></div> <div class="container-fluid px-0"> <div class="row"> <div class="col-12 px-0"> {# Banner #} <div id="carousel_home_page" class="carousel slide carousel-dark carousel-fade" data-bs-interval="false" data-bs-ride="carousel"> <div class="carousel-indicators"> {% if(banners|length > 0) %} {% set counter = 0 %} {% for banner in banners %} {% set isActive = 'false' %} {% set activeClass = '' %} {% if counter == 0 %} {% set isActive = 'true' %} {% set activeClass = 'active' %} {% endif %} <button type="button" data-bs-target="#carousel_home_page" data-bs-slide-to="{{ counter }}" class="{{ activeClass }}" aria-current="{{ isActive }}" aria-label="{{ banner.alt }}"></button> {% set counter = counter + 1 %} {% endfor %} {% endif %} </div> <div class="carousel-inner"> {% if(banners|length > 0) %} {% for banner in banners %} {% set isActive = '' %} {% if banner.isDefault == 1 %} {% set isActive = 'active' %} {% endif %} <div class="carousel-item text-center {{ isActive }}"> <img src="{{ asset('images/banners/' ~ banner.name) }}" alt="{{ banner.alt }}" class="img-fluid w-100 {{ isActive }}" > <div class="container d-none d-sm-block"> <div class="carousel-caption text-start"> {{ banner.caption|raw }} </div> </div> </div> {% endfor %} {% endif %} </div> <button class="carousel-control-prev" type="button" data-bs-target="#carousel_home_page" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carousel_home_page" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> {# End Banner #} </div> </div> {# Featured Products #} <div class="row" id="popular_products"> <div class="col-12 text-center form-control-bg-grey"> <h4 class="my-5"> Popular Products </h4> </div> <div class="col-12 pb-5 form-control-bg-grey"> <section class="slider multiple-items"> {% for product in products %} {% set dosage = '' %} {% set from = '' %} {% set per = product.form %} {% if product.form == 'Each' %} {% set dosage = product.size ~ product.unit %} {% endif %} {% if product.size > 0 %} {% set priceFrom = 0.00 %} {% if product.priceFrom is not null %} {% set priceFrom = product.priceFrom %} {% endif %} {% set dosage = product.dosage ~ product.unit ~ ', ' ~ product.size ~ ' Count' %} {% set from = 'From ' ~ priceFrom|format_currency('AED') ~ ' per ' ~ per %} {% endif %} {% set image = asset('images/products/image-not-found.jpg') %} {% if product.productImages[0].image is not empty %} set image = {{ asset('images/products/' ~ product.productImages[0].image) }} {% endif %} <div class="row"> <div class="col-12 half-border-home"> <div class="row slick-gradient"> <div class="col-3 text-center py-3"> <img src="{{ image }}" class="img-fluid" style="max-height: 80px"> </div> <div class="col-9 text-start"> <div class="row"> <div class="col-12 mt-4 text-truncate"> <h6 class="text-truncate"> {{ product.name ~ ' ' ~ dosage }} </h6> </div> <div class="col-12 pb-3 text-truncate"> <span class="text-truncate"> {{ from }} </span> </div> </div> </div> {% for distributorPoduct in product.distributorProducts %} <div class="col-12 text-start my-2"> <div class="row"> <div class="col-8 text-truncate"> <h6 class="text-truncate">{{ nzo_decrypt(distributorPoduct.distributor.distributorName) }}</h6> </div> <div class="col-4 text-end fw-bold text-truncate"> {{ distributorPoduct.unitPrice|format_currency('AED') }} </div> </div> </div> {% endfor %} </div> </div> </div> {% endfor %} </section> </div> </div> {# How It Works #} <div class="row pt-5 pb-4"> <div class="col-12 text-center"> <h4> How It Works </h4> </div> </div> <div class="row g-4 pb-5 row-cols-1 row-cols-lg-3" id="how_it_works_container"> <div class="feature col text-center"> <div class="mx-5"> <div class="btn bg-primary bg-gradient mb-4"> <i class="bi bi-plus-lg text-white home-page-icon" width="1em" height="1em"></i> </div> <h6>Add Your Supplies</h6> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida nulla vitae tortor porttitor, ac tincidunt mauris efficitur. Vivamus iaculis sed sapien quis imperdiet. Phasellus viverra dui lorem. </p> </div> </div> <div class="feature col text-center"> <div class="mx-5"> <div class="btn bg-primary bg-gradient mb-4"> <i class="bi bi-arrow-left-right text-white home-page-icon" width="1em" height="1em"></i> </div> <h6>Compare Pricing & Availability</h6> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida nulla vitae tortor porttitor, ac tincidunt mauris efficitur. Vivamus iaculis sed sapien quis imperdiet. Phasellus viverra dui lorem. </p> </div> </div> <div class="feature col text-center"> <div class="mx-5"> <div class="btn bg-primary bg-gradient mb-4"> <i class="bi bi-basket text-white home-page-icon" width="1em" height="1em"></i> </div> <h6>Add To Basket</h6> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida nulla vitae tortor porttitor, ac tincidunt mauris efficitur. Vivamus iaculis sed sapien quis imperdiet. Phasellus viverra dui lorem. </p> </div> </div> </div> {# Contact Us #} <div class="row" id="contact_container"> <div class="col-12 mx-0 px-0 text-center form-control-bg-grey"> <h4 class="my-3 my-sm-5" id="contact_title"> Contact Us </h4> <form name="contact_form" id="contact_form" class="text-start px-4 mb-4 mx-sm-5 px-sm-2 mb-sm-0 pb-4" data-action="submit->home-page#onSubmitContactForm" > <div class="row"> <div class="col-12 col-sm-9"> <div class="row mb-2 mb-sm-4"> <div class="col-12 col-sm-6 mb-2 mb-sm-0"> <input type="text" name="name" id="name" class="form-control" placeholder="Your full name *" > <div class="hidden_msg" id="error_name"> Required Field </div> </div> <div class="col-12 col-sm-6"> <input type="text" name="telephone" id="telephone" class="form-control" placeholder="Your telephone number *" > <div class="hidden_msg" id="error_telephone"> Required Field </div> </div> </div> <div class="row mb-2 mb-sm-4"> <div class="col-12"> <input type="text" name="email" id="email" class="form-control" placeholder="Your email *" > <div class="hidden_msg" id="error_email"> Required Field </div> </div> </div> <div class="row mb-2 mb-sm-4"> <div class="col-12"> <textarea name="message" id="message" class="form-control" placeholder="Your message *" rows="3" ></textarea> <div class="hidden_msg" id="error_message"> Required Field </div> </div> </div> <div class="row mb-2 mb-sm-4"> <div class="col-12"> <button type="submit" class="btn btn-primary float-end w-sm-100 mb-4 mb-sm-0" name="btn-contact" id="btn_contact" > SUBMIT </button> </div> </div> </div> <div class="col-12 col-sm-3"> <div class="row"> <div class="col-12 mb-3"> <div class="btn bg-primary bg-gradient me-3"> <i class="bi bi-telephone text-white home-page-icon cursor-text" width="1em" height="1em" ></i> </div> +971 6539 5443 </div> <div class="col-12 mb-3"> <div class="btn bg-primary bg-gradient me-3"> <i class="bi bi-envelope text-white home-page-icon cursor-text" width="1em" height="1em" ></i> </div> info@fluid.vet </div> <div class="col-12 mb-3"> <table> <tr> <td> <div class="btn bg-primary bg-gradient me-3 float-start"> <i class="bi bi-geo-alt text-white home-page-icon cursor-text" width="1em" height="1em" ></i> </div> </td> <td> <div class="float-start"> Detroit House, Office 410,<br> Motor City, Dubai, UAE. </div> </td> </tr> </table> </div> </div> </div> </div> </form> </div> </div> </div> <div class="overlay"></div> <div class="spanner"> <div class="loader"></div> <p class="text-light fw-bold" style="font-size: 36px;">Loading...</p> </div>{% endblock %}{% block javascripts %} {{ parent() }}{% endblock %}