{% extends 'base.html.twig' %}
{% block body %}
<div class="container-fluid main-holder px-5 bg-light home-banner-holder">
<div class="row">
<div class="col-lg-5 ps-4 mb-4">
<p class="fs-5">{{ ecomvariables.textcontent('home_header_text')|raw() }}</p>
{{ ecomvariables.textcontent('home_header_heading')|raw() }}
</div>
<div class="col-lg-6 offset-lg-1">
<h6>Most Popular Cities</h6>
<ul class="list-unstyled list-inline pb-4">
<a href="{{ path('sajong_ecom_city_brands', {'city':'New York' }) }}">
<li class="bg-white rounded-pill px-3 py-3 list-inline-item fw-semibold border-bottom me-3 mt-3">New York</li>
</a>
<a href="{{ path('sajong_ecom_city_brands', {'city':'Los Angeles' }) }}">
<li class="bg-white rounded-pill px-3 py-3 list-inline-item fw-semibold border-bottom me-3 mt-3">Los Angeles</li>
</a> <a href="#0">
<li class="bg-white rounded-pill px-3 py-3 list-inline-item fw-semibold border-bottom me-3 mt-3">Milwaukee</li>
</a> <a href="#0">
<li class="bg-white rounded-pill px-3 py-3 list-inline-item fw-semibold border-bottom me-3 mt-3">Chicago</li>
</a> <a href="#0">
<li class="bg-white rounded-pill px-3 py-3 list-inline-item fw-semibold border-bottom me-3 mt-3">Buffalo</li>
</a> <a href="#0">
<li class="bg-white rounded-pill px-3 py-3 list-inline-item fw-semibold border-bottom me-3 mt-3">Boise</li>
</a> <a href="#0">
<li class="bg-white rounded-pill px-3 py-3 list-inline-item fw-semibold border-bottom me-3 mt-3">Rochester</li>
</a> <a href="#0">
<li class="bg-white rounded-pill px-3 py-3 list-inline-item fw-semibold border-bottom me-3 mt-3">Charlotte</li>
</a> <a href="#0">
<li class="bg-white rounded-pill px-3 py-3 list-inline-item fw-semibold border-bottom me-3 mt-3">Tampa</li>
</a> <a href="#0">
<li class="bg-white rounded-pill px-3 py-3 list-inline-item fw-semibold border-bottom me-3 mt-3">Boston</li>
</a>
</ul>
<form>
<div class="row">
<div class="col-md-6 position-relative mb-3"> <i data-feather="search" class="iconsize position-absolute search-icon"></i>
<input class="form-control border rounded-pill py-3 px-3 ps-5 shadow-none" type="text" id="" placeholder="Search for your City or Brand">
</div>
<div class="col-md-6">
<select class="home-select form-select rounded-pill py-3 px-3 bg-secondary text-white border-secondary shadow-none" id="">
<option selected>Select a City</option>
{% for c in ecomvariables.cities() %}
<option value="{{ c.id }}">{{ c.name }}</option>
{% endfor %}
</select>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container-fluid px-5">
<div class="home-img"><img src="{{ asset('uploads/contents/' ~ ecomvariables.imagecontent('home_top_banner').images[0].image) }}" class="img-fluid" alt=""></div>
</div>
<div class="container-fluid px-5 hm-slogan">
<div class="row">
<div class="col-lg-6 offset-lg-1 fs-4 ">
<div class="border-start border-primary border-3 ps-4"><span class="fw-semibold">{{ ecomvariables.textcontent('home_banner_text')|raw() }}</div>
</div>
</div>
</div>
<div class="container-fluid px-5">
<div class="row mt-5 pt-5 pb-4">
<div class="col-lg-12">
<h4 class="fw-semibold">Popular Brands / Shops</h4>
</div>
<div class="col-lg-4 mt-4"> <a href="{{ path('sajong_ecom_brand_categories', {'brand':'Kodak_2' }) }}">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="{{ asset('img/brand.jpg') }}" alt="" class="img-fluid"> </div>
<h5 class="fw-bold mt-3 mb-4">Kodak</h5>
</a> </div>
<div class="col-lg-4 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="{{ asset('img/brand.jpg') }}" alt="" class="img-fluid"> </div>
<h5 class="fw-bold mt-3 mb-4">Kodak</h5>
</a> </div>
<div class="col-lg-4 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="{{ asset('img/brand.jpg') }}" alt="" class="img-fluid"> </div>
<h5 class="fw-bold mt-3 mb-4">Kodak</h5>
</a> </div>
<div class="col-lg-4 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="{{ asset('img/brand.jpg') }}" alt="" class="img-fluid"> </div>
<h5 class="fw-bold mt-3 mb-4">Kodak</h5>
</a> </div>
<div class="col-lg-4 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="{{ asset('img/brand.jpg') }}" alt="" class="img-fluid"> </div>
<h5 class="fw-bold mt-3 mb-4">Kodak</h5>
</a> </div>
<div class="col-lg-4 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="{{ asset('img/brand.jpg') }}" alt="" class="img-fluid"> </div>
<h5 class="fw-bold mt-3 mb-4">Kodak</h5>
</a> </div>
</div>
<div class="row mt-5">
<div class="col-md-12 text-center"> <a href="#0" class="bg-secondary text-white px-4 py-4 rounded-pill">Request a Brand</a> </div>
</div>
</div>
<div class="container mt-5 pt-5">
<div class="row">
<div class="col-lg-4 mt-2 mb-4 offset-lg-1">
<h2 class="fw-bold mb-4">{{ ecomvariables.textcontent('home_about_heading')|raw() }}</h2>
<p class="mb-5 fs-5">{{ ecomvariables.textcontent('home_about_text')|raw() }}</p>
<a href="#0" class="bg-secondary text-white px-4 py-4 rounded-pill d-inline-block">Read our story</a> </div>
<div class="col-lg-6"><img src="{{ asset('uploads/contents/' ~ ecomvariables.imagecontent('home_about_image').images[0].image) }}" class="img-fluid" alt=""></div>
</div>
</div>
{% endblock %}