{% extends "layout-ar.html" %}

{% set title = 'الصفحة الرئيسية' %}

{% block content %}

<section class="sec-pad hero-img cover hero-border" style="background-image: url('_assets/img/cover/homepage.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-sm-12">
                <div class="hero-text">
                    <h2 class="no-margin mbmd">
                        {% raw %}${{ home.Order }}${% endraw %}<br>
                        {% raw %}${{ home.Food-Online-Now }}${% endraw %}
                    </h2>
                    <p>
                        <span>{% raw %}${{ home.Select-your-location }}${% endraw %}</span>{% raw %}${{ home.enjoy }}${% endraw %}
                    </p>
                    <form class="hero-form mtxlg" action="">
                        <div class="checkbox-custom">
                            <input type="radio" name="location" value="jeddah" id="jeddah" class="form-radio"><label class="mrlg" for="jeddah">{% raw %}${{ home.Jeddah }}${% endraw %}</label>
                            <input type="radio" name="location" value="madina" id="madina" class="form-radio"><label for="madina">{% raw %}${{ home.Madina }}${% endraw %}</label>
                        </div>
                        <div class="select-container mtxlg">
                            <div class="custom-select" for="category">
                                <select id="category" name="category">
                                    <option value="">
                                        {% raw %}${{ home.Categories }}${% endraw %}
                                    </option>
                                    <option value="1">
                                        {% raw %}${{ home.Option-1 }}${% endraw %}
                                    </option>
                                    <option value="2">
                                        {% raw %}${{ home.Option-2 }}${% endraw %}
                                    </option>
                                    <option value="3">
                                        {% raw %}${{ home.Option-3 }}${% endraw %}
                                    </option>
                                    <option value="4">
                                        {% raw %}${{ home.Option-4 }}${% endraw %}
                                    </option>
                                </select>
                            </div>
                            <a class="btn btn-green btn-search" href="search.html">
                                <i class="fas fa-search"></i>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="sec-pad hero-img cover" style="background-image: url('_assets/img/cover/homepage-1.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-sm-12">
                <div class="hero-text hero-black">
                    <h2 class="no-margin mbmd">
                        {% raw %}${{ home.Order }}${% endraw %}<br>
                        {% raw %}${{ home.Food-Online-Now }}${% endraw %}
                    </h2>
                    <p class="mbxxlg">
                        <span>{% raw %}${{ home.Select-your-location }}${% endraw %}</span>{% raw %}${{ home.enjoy }}${% endraw %}
                    </p>
                    <a href="" class="btn btn-green text-upper">{% raw %}${{ home.order-now }}${% endraw %}</a>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="sec-pad ball">
    <div class="container">
        <div class="features">
            <div class="row">
                <div class="col-sm-3 br">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/quality.svg" alt="">
                        </div>
                        <h3>{% raw %}${{ home.Quality }}${% endraw %}</h3>
                        <p>
                            {% raw %}${{ home.Choose-transfer }}${% endraw %}
                        </p>
                    </div>
                </div>
                <div class="col-sm-3 br">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/fast.svg" alt="">
                        </div>
                        <h3>{% raw %}${{ home.Fast-Delivery }}${% endraw %}</h3>
                        <p>
                            {% raw %}${{ home.Choose-transfer }}${% endraw %}
                        </p>
                    </div>
                </div>
                <div class="col-sm-3 br">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/plate.svg" alt="">
                        </div>
                        <h3>{% raw %}${{ home.Various-Cusines }}${% endraw %}</h3>
                        <p>
                            {% raw %}${{ home.Choose-transfer }}${% endraw %}
                        </p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="feature text-center">
                        <div class="feature-img">
                            <img src="_assets/img/icons/chat.svg" alt="">
                        </div>
                        <h3>{% raw %}${{ home.Live-Chat }}${% endraw %}</h3>
                        <p>
                            {% raw %}${{ home.Choose-transfer }}${% endraw %}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad">
    <div class="container">
        <div class="category">
            <div class="section-title mbxxlg">
                <h2 class="text-capitalize text-center no-margin">{% raw %}${{ home.new-meals }}${% endraw %}</h2>
            </div>
            <div class="row">
                <div class="product-slider">
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad hero-img cover overlay back-fixed" style="background-image: url('_assets/img/cover/deals.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <div class="hero-text text-center">
                    <h2 class="no-margin mbmd">
                        {% raw %}${{ home.WEEKLY }}${% endraw %}<br>
                        {% raw %}${{ home.Deals }}${% endraw %}
                    </h2>
                    <p class="mbxxlg text-center">
                        {% raw %}${{ home.Weekly-deals }}${% endraw %}
                    </p>
                    <a href="" class="btn btn-green text-upper d-inline">{% raw %}${{ home.Learn-more }}${% endraw %}</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad">
    <div class="container">
        <div class="category">
            <div class="section-title mbxxlg">
                <h2 class="text-capitalize text-center no-margin">{% raw %}${{ home.Popular-Meals }}${% endraw %}</h2>
            </div>
            <div class="row">
                <div class="product-slider">
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                    <div class="mtsm mbsm mrsm mlsm">{% include 'component/product-ar.html' %}</div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad hero-img cover back-fixed" style="background-image: url('_assets/img/cover/homepage.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <div class="hero-text text-center">
                    <h2 class="no-margin mbmd">
                        {% raw %}${{ home.Subscribe }}${% endraw %}
                    </h2>
                    <p class="mbxxlg text-center">
                        {% raw %}${{ home.Receive-deals }}${% endraw %}
                    </p>
                    <form class="hero-form hero-subscribe mtxlg" action="">
                        <div class="checkbox-custom">
                            <input type="radio" name="location" value="jeddah-1" id="jeddah-1" class="form-radio"><label class="mrlg" for="jeddah-1">{% raw %}${{ home.Jeddah }}${% endraw %}</label>
                            <input type="radio" name="location" value="madina-1" id="madina-1" class="form-radio"><label for="madina-1">{% raw %}${{ home.Madina }}${% endraw %}</label>
                        </div>
                        <div class="input-group mtxlg">
                            <input type="email" class="form-control" placeholder="Write your e-mail here">
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="button"><i class="fa fa-paper-plane"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>



<section class="sec-pad">
    <div class="container">
        <div class="category">
            <div class="section-title mbxxlg">
                <h2 class="text-capitalize text-center no-margin">{% raw %}${{ home.Brands }}${% endraw %}</h2>
            </div>
            <div class="row">
                <div class="brands-slider">
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/1.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">{% raw %}${{ home.Restaurant }}${% endraw %}</h3>
                    </a>
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/2.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">{% raw %}${{ home.Restaurant }}${% endraw %}</h3>
                    </a>
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/3.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">{% raw %}${{ home.Restaurant }}${% endraw %}</h3>
                    </a>
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/4.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">{% raw %}${{ home.Restaurant }}${% endraw %}</h3>
                    </a>
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/5.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">{% raw %}${{ home.Restaurant }}${% endraw %}</h3>
                    </a>
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/1.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">{% raw %}${{ home.Restaurant }}${% endraw %}</h3>
                    </a>
                    <a href="kitchen.html" class="brand">
                        <div class="logo text-center">
                            <img src="_assets/img/clients/2.jpg" alt="">
                        </div>
                        <h3 class="mtlg text-center">{% raw %}${{ home.Restaurant }}${% endraw %}</h3>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="sec-pad hero-img cover app">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="hero-text hero-black">
                    <h2 class="no-margin mbmd text-upper">
                        {% raw %}${{ home.Get-app }}${% endraw %}
                    </h2>
                    <p>
                        {% raw %}${{ home.fastest }}${% endraw %}
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="download">
                    <a href="#" class="mbmd">
                        <img src="_assets/img/icons/app_store.svg" alt="">
                    </a>
                    <a href="#">
                        <img src="_assets/img/icons/play_store.svg" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="hand">
            <img src="_assets/img/hand.png" alt="">
        </div>
    </div>
</section>

{% include 'component/product-model.html' %}

{% endblock content %}