{% extends 'base.html.twig' %}
{% trans_default_domain 'store' %}
{% block title %}{{ 'page_main_title'|trans({}, 'store', locale) }}{% endblock %}
{% block content %}
<section class="section" style="padding:5px!important;">
<div class="container">
{% include '/frontend/components/notification.html.twig' %}
</div>
</section>
<!-- START OF SLIDER -->
<div class="section" style="padding:2rem 1.5rem;">
<div class="container">
<!-- SLIDER NA DESKTOP -->
<div class='carousel carousel-animated carousel-animate-slide carousel-desktop'>
<div class='carousel-container'>
{% set c = 0 %}
{% for banner in banners %}
{% if banner.type == constant('App\\Entity\\Banners::TYPE_BIG') %}
{% set c = c + 1 %}
<div data-href="{{ banner.url }}" class='carousel-item carousel-item-link has-background' style="height:100%; background: {{ banner.color }}!important;">
<div style="color: {{ banner.campaignTextColor }}!important; float: left; max-width: 45%;">
<h1 class="banner_h1">
{{ banner.title }}
</h1>
<div class="additionalText">
{{ banner.additionalText }}
</div>
<div>
{% if banner.buttonText %}
<a class="btn-banner" href="{{ banner.url }}" style="background-color:{{ banner.buttonColor }}!important; color:{{ banner.buttonTextColor }}!important;">
{{ banner.buttonText }}
</a>
{% endif %}
</div>
</div>
<div style="width: 100%; background: {{ banner.color }}!important; float:right; max-width: 55%;">
<a href="{{ banner.url }}">
<img class="is-background" style="height:100%!important; float: right" src="/images/important/{{ banner.imageName }}" alt="{{ banner.title }}" />
</a>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="carousel-navigation is-overlay">
<div class="carousel-nav-left">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</div>
<div class="carousel-nav-right">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
<!-- SLIDER NA MOBILKI -->
<div class='carousel carousel-animated carousel-animate-slide carousel-mobile'>
<div class='carousel-container'>
{% for banner in banners %}
{% if banner.type == constant('App\\Entity\\Banners::TYPE_BIG') %}
<div data-href="{{ banner.url }}" class='carousel-item carousel-item-link has-background' style="background: {{ banner.color }}!important;">
<div>
<img class="is-background" src="/images/important/{{ banner.imageName }}" alt="{{ banner.title }}" width="640" height="310" />
<div class="has-text-centered" style="background: {{ banner.color }}!important; margin-top:-10px;">
<h1 class="banner_h1 has-text-centered" style="color: {{ banner.campaignTextColor }}!important;">
{{ banner.title }}
</h1>
<div class="additionalText has-text-centered" style="color: {{ banner.campaignTextColor }}!important; margin-top:-10px;">
{{ banner.additionalText }}
</div>
{% if banner.buttonText %}
<div style="margin-top:30px; display: flex;align-items: center; justify-content: center;" class="has-text-centered">
<a class="btn-banner-mobile" href="{{ banner.url }}" style="margin-bottom:20px; background-color:{{ banner.buttonColor }}!important; color:{{ banner.buttonTextColor }}!important;">
{{ banner.buttonText }}
</a>
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="carousel-navigation is-overlay">
<div class="carousel-nav-left">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</div>
<div class="carousel-nav-right">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
<!-- END OF SLIDER -->
<!-- START CATEGORIES -->
<section class="section" style="padding-top:0px;">
<div class="container">
<div class="has-text-centered is-4">
<h1 class="is-size-4 margin-bot-30 standard-color">{{ 'seo_header_title'|trans }}</h1>
</div>
<div class="columns is-multiline nasze-produkty">
{% for category in categories %}
<!-- START CATEGORY BOX -->
<div class="column is-one-third-desktop is-half-tablet cat-container">
<article style="background-image:url(/images/category/{{ category.imageName }}); cursor: pointer;" class="box has-bg-img category-box" data-href="{{ path('category', {'id':category.id, 'slug':category.slug}) }}">
<div class="content category-link">
<div class="mobile-image-container is-flex is-hidden-desktop has-text-centered is-vcentered" style="align-items: center;">
{% if category.imageName3 %}
<img alt="{{ category.name }}" src="/images/category/{{ category.imageName3 }}">
{% endif %}
</div>
<h2 class="title is-size-4 has-text-centered is-half-touch category-title">
<a href="{{ path('category', {'id':category.id, 'slug':category.slug}) }}">{{ category.name }}</a>
</h2>
<div class="columns is-hidden-touch">
<div class="column is-offset-one-third">
<ul class="list-red is-size-7">
{% for child in category.childrens %}
{% set visible = 1 %}
{% for langParam in child.langParams %}
{% if langParam.language.locale == app.request.locale %}
{% set visible = langParam.visible %}
{% endif %}
{% endfor %}
{% if visible == 1 %}
<li><a href="{{ path('category', {'id':child.id, 'slug':child.slug}) }}">{{ child.name }}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
</article>
</div>
<!-- END CATEGORY BOX -->
{% endfor %}
</div>
</div>
</section>
<!-- END CATEGORIES -->
<!-- START OF SPECIAL OFFERS -->
<div class="section is-hidden-touch">
<div class="container">
<div class="is-size-4 margin-bot-30 is-600 is-red has-text-centered is-3 bold">
{{ 'promo_special_offer'|trans }}
</div>
<div class="columns is-multiline special-offers-boxes">
<!-- START CATEGORY BOX -->
<div class="column is-one-third-desktop">
{% if app.request.locale == 'pl' %}
<a href="https://www.centrumkrzesel.pl/lp/228/strefa-okazji">
{% endif %}
{% if app.request.locale == 'sk' %}
<a href="{{ path('category', {'id':121, 'slug':'akcna-ponuka'}) }}">
{% endif %}
{% if app.request.locale == 'cz' %}
<a href="{{ path('category', {'id':121, 'slug':'akcni-nabidka-'}) }}">
{% endif %}
{% if app.request.locale == 'ro' %}
<a href="https://www.mobila24.ro/oferte/121/c">
{% endif %}
<article style="background-image:url({{ staticImages[locale].szok }});" class="box has-bg-img special-offer-box">
</article>
</a>
</div>
<!-- END CATEGORY BOX -->
<!-- START CATEGORY BOX -->
<div class="column is-one-third-desktop">
<article style="background-image:url({{ staticImages[locale].prod24h }});" class="box has-bg-img special-offer-box">
</article>
</div>
<!-- END CATEGORY BOX -->
<!-- START CATEGORY BOX -->
<div class="column is-one-third-desktop">
{% if app.request.locale == 'ro' %}
<a href="https://www.mobila24.ro/scaune-elementare-accesibile/126/c">
{% else %}
<a href="{{ path('category', {'id':237, 'slug':'outlet-2'}) }}">
{% endif %}
<article style="background-image:url({{ staticImages[locale].outlet }});" class="box has-bg-img special-offer-box">
</article>
</a>
</div>
<!-- END CATEGORY BOX -->
</div>
</div>
</div>
<!-- END OF SPECIAL OFFERS -->
<!-- START OF BESTSELLER SLIDER -->
<section class="section">
<div class="columns">
<product-tabs :slides-count="6" inline-template v-cloak>
<div class="column is-full" id="podobne" v-match-heights="{ el: [ '.card-image' ]}">
<div class="tabs is-centered is-medium">
<ul>
<li class="is-active">
<a href="#" @click.stop.prevent="clicked( 2 )">{{ 'bestsellers_section_title'|trans }}</a>
</li>
</ul>
</div>
{% set c = 0 %}
<agile ref="carousel_2" class="container is-fluid thumbnails" :options="sliderOptions">
{% for productData in promotionsProducts %}
{% set product = productData[0] %}
{% if productData.isBestseller %}
{% set c = c +1 %}
{% if c < 11 %}
{% include 'frontend/components/smallProduct.html.twig' with {'lazyDisabled':1, 'cssClass':'card-homepage', 'isOneQuarter':1, 'product':product, 'productData':productData} %}
{% endif %}
{% endif %}
{% endfor %}
<template slot="prevButton"><i class="fas fa-chevron-left" style="margin-left:20px;"></i></template>
<template slot="nextButton"><i class="fas fa-chevron-right" style="margin-right: 20px;"></i></template>
</agile>
</div>
</product-tabs>
</div>
{% if catBest %}
<div class="has-text-centered">
<a href="{{ path('category', {'id':catBest.id, 'slug':catBest.slug}) }}" class="standard-button btn-banner-mobile">
{{ 'view_all_bestseller'|trans }} <i class="fa fa-arrow-right"></i>
</a>
</div>
{% endif %}
</section>
<!-- START OF BANNERS SECTION -->
<section class="section banners">
<div class="container">
<div class="columns">
{% for banner in smallBanners %}
{% if banner.position == 1 %}
{% include '/frontend/components/_smallBanner.html.twig' with {'cssClass':'is-three-fifths-desktop', 'banner':banner, 'cta':1} %}
{% endif %}
{% endfor %}
{% for banner in smallBanners %}
{% if banner.position == 2 %}
{% include '/frontend/components/_smallBanner.html.twig' with {'cssClass':'is-two-fifths-desktop', 'banner':banner, 'cta':0} %}
{% endif %}
{% endfor %}
</div>
<div class="columns">
{% for banner in smallBanners %}
{% if banner.position == 3 %}
{% include '/frontend/components/_smallBanner.html.twig' with {'cssClass':'is-two-fifths-desktop', 'banner':banner, 'cta':0} %}
{% endif %}
{% endfor %}
{% for banner in smallBanners %}
{% if banner.position == 4 %}
{% include '/frontend/components/_smallBanner.html.twig' with {'cssClass':'is-three-fifths-desktop', 'banner':banner, 'cta':1} %}
{% endif %}
{% endfor %}
</div>
{% for banner in smallBanners %}
{% if banner.position == 5 %}
<div class="columns">
<div class="column is-full is-hidden-desktop">
<div class="image">
{% if banner.url %}
<a href="{{ banner.url }}">
<img src="/images/important/{{ banner.imageName }}" alt="{{ banner.title }}">
</a>
{% else %}
<img src="/images/important/{{ banner.imageName }}" alt="{{ banner.title }}">
{% endif %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</section>
<!-- END OF BANNERS SECTION -->
<input type="hidden" value="{% if isMobile is defined and isMobile %}2{% else %}5{% endif %}" id="slide_counter"/>
<!-- START OF BESTSELLER SLIDER -->
<section class="section">
<div class="columns">
<product-tabs :slides-count="6" inline-template v-cloak>
<div class="column is-full" id="podobne" v-match-heights="{ el: [ '.card-image' ]}">
<div class="tabs is-centered is-medium" style="margin-bottom: -20px;">
<ul>
<li :class="tab == 1 ? 'is-active' : ''">
<a href="#" @click.stop.prevent="clicked( 1 )">{{ 'newest'|trans }}</a>
</li>
</ul>
</div>
<agile ref="carousel_1" class="container is-fluid thumbnails" :options="sliderOptions" v-if="tab == 1">
{% for productData in promotionsProducts|slice(0,10) %}
{% set product = productData[0] %}
{% if productData.isNew %}
{% include 'frontend/components/smallProduct.html.twig' with {'lazyDisabled':1, 'cssClass':'card-homepage', 'isOneQuarter':1, 'product':product, 'productData':productData} %}
{% endif %}
<!-- END OF ARTICLE -->
{% endfor %}
<template slot="prevButton"><i class="fas fa-chevron-left" style="margin-left:20px;"></i></template>
<template slot="nextButton"><i class="fas fa-chevron-right" style="margin-right: 20px;"></i></template>
</agile>
</div>
</product-tabs>
</div>
{% if catNews %}
<div class="has-text-centered">
<a href="{{ path('category', {'id':catNews.id, 'slug':catNews.slug}) }}" class="standard-button btn-banner-mobile">
{{ 'view_all_newest'|trans }} <i class="fa fa-arrow-right"></i>
</a>
</div>
{% endif %}
</section>
<!-- END OF BESTSELLER SLIDER -->
<!-- START OF INFOGRAPHIC SECTION -->
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-half">
<div class="subtitle has-text-centered margin-bot-30">
{{ 'for_your_convinient'|trans }}
</div>
</div>
</div>
<div class="columns home-ikony is-multiline is-centered is-flex-tablet is-hidden-mobile">
<div class="column is-half-mobile has-text-centered">
<figure class="image">
<img src="/v2/ico/ico_14.svg" alt="">
</figure>
<p class="title is-16px standard-color">{{ '14_days_return'|trans|raw }}</p>
</div>
<div class="column is-half-mobile has-text-centered">
<figure class="image">
<img src="{{ staticImages[locale].freeDelivery }}" alt="" {% if app.request.locale == 'ro' or app.request.locale == 'sk' or app.request.locale == 'cz' %}style="width: 70px!important;" {% endif %}>
</figure>
<p class="title is-16px standard-color">{{ 'free_delivery_return'|trans|raw }}</p>
</div>
<div class="column is-half-mobile has-text-centered">
<figure class="image">
<img src="/v2/ico/ico_300_customers.svg" alt="">
</figure>
<p class="title is-16px standard-color">{{ 'text_300_customers'|trans|raw }}</p>
</div>
<div class="column is-half-mobile has-text-centered">
<figure class="image">
<img src="/v2/ikonka_18_lat.png" alt="">
</figure>
<p class="title is-16px standard-color">{{ '15_years'|trans|raw }}</p>
</div>
<div class="column is-half-mobile has-text-centered">
<figure class="image">
<img src="/v2/ico/ico_pig.svg" alt="">
</figure>
<p class="title is-16px standard-color">{{ 'price_with_negotiations'|trans|raw }}</p>
</div>
</div>
<div class='carousel carousel-animated carousel-animate-slide is-hidden-tablet'>
<div class='carousel-container'>
<div class="carousel-item" style="display: flex;">
<div class="column is-half-mobile has-text-centered has-background">
<figure class="mobile-ico-height">
<img src="/v2/ico/ico_14.svg" alt="">
</figure>
<p class="is-16px standard-color">{{ '14_days_return'|trans|raw }}</p>
</div>
<div class="column is-half-mobile has-text-centered has-background">
<figure class="mobile-ico-height">
<img style="max-height: 90px;" src="{{ staticImages[locale].freeDelivery }}" alt="">
</figure>
<p class="is-16px standard-color">{{ 'free_delivery_return'|trans|raw }}</p>
</div>
</div>
<div class="carousel-item" style="display: flex;">
<div class="column is-half-mobile has-text-centered has-background">
<figure class="mobile-ico-height">
<img src="/v2/ico/ico_300_customers.svg" alt="">
</figure>
<p class="is-16px standard-color">{{ 'text_300_customers'|trans|raw }}</p>
</div>
<div class="column is-half-mobile has-text-centered has-background">
<figure class="mobile-ico-height">
<img src="/v2/ikonka_18_lat.png" alt="">
</figure>
<p class="is-16px standard-color">{{ '15_years'|trans|raw }}</p>
</div>
</div>
<div class="carousel-item" style="display: flex;">
<div class="column is-half-mobile has-text-centered has-background">
<figure class="mobile-ico-height">
<img src="/v2/ico/ico_pig.svg" alt="">
</figure>
<p class="is-16px standard-color">{{ 'price_with_negotiations'|trans|raw }}</p>
</div>
<div class="column is-half-mobile has-text-centered has-background">
<figure class="mobile-ico-height">
<img src="{{ staticImages[locale].freeDelivery }}" alt="">
</figure>
<p class="is-16px standard-color">{{ 'free_delivery_return'|trans|raw }}</p>
</div>
</div>
</div>
<div class="carousel-navigation is-overlay">
<div class="carousel-nav-left">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</div>
<div class="carousel-nav-right">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</section>
<!-- END OF INFOGRAPHIC SECTION -->
<form action="{{ path('getresponse_handler') }}" method="post">
<!-- START OF NEWSLETTER SECTION -->
<section class="section newsletter" style="background: #DBDBDB;">
<div class="container">
<div class="columns is-centered">
<div class="column is-three-fifths-desktop is-full-mobile">
<div class="title is-size-4">
<strong>
{{ 'save_to_newsletter'|trans }}
</strong>
</div>
<div class="title title-light" style="font-size: 18px;">
{{ 'recieve_newest_info'|trans|raw }}
</div>
<div class="title" style="margin-top:-17px; font-size:18px;">
{{ 'newsletter_discount_info_header2'|trans|raw }}
</div>
<div class="field has-addons" style="z-index: 100000;">
<p class="control is-expanded form-input" style="z-index: 100000;"> <!-- form -->
<input type="text" name="email" class="input newsletter-input" placeholder="{{ 'your_email'|trans }}">
<button class="button is-danger news-button">{{ 'sign_in_newsletter'|trans }}</button>
</p>
</div>
</div>
<div class="column is-two-fifths-desktop is-hidden-mobile" style="display: flex; align-items: center; justify-content: center;">
<img alt="newsletter signup" style="max-width: 250px;" src="/v2/koperta-transparent.png"/>
</div>
</div>
{% if app.request.locale == 'pl' %}
<div class="columns is-full" style="margin-left:5px; margin-top:-35px;">
<a href="/images/terms_{{ app.request.locale }}.pdf" target="_blank" style="font-size:14px;">
{{ 'newsletter_terms_accept_info'|trans|raw }}
</a>
</div>
{% endif %}
</div>
</section>
</form>
<!-- END OF NEWSLETTER SECTION -->
<!-- START OF LOGOS -->
<div class="is-hidden-mobile">
<section class="section logos">
<div class="container">
<logo-carousel inline-template v-cloak
:logos="[
{% for producer in producers %}
{
img: 'https://{{ domain }}/images/producer/{{ producer.imageName }}',
url: '{{ productProducerUrl(producer.id, app.request.locale) }}'
},
{% endfor %}
]"
>
<div class="columns is-multiline is-centered">
<agile class="container" :options="logoOptions">
<div class="column" v-for="( logo, index ) in slides" :key="index">
<a :href="logo.url">
<div class="image">
<img :src="logo.img" />
</div>
</a>
</div>
</agile>
</div>
</logo-carousel>
</div>
</section>
</div>
<!-- END OF LOGOS -->
{% if app.request.locale == 'pl' %}
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: 36267 },
{ event: "setEmail", email: "{% if app.user.email is defined %} {{ app.user.email }} {% endif %}" },
{ event: "setSiteType", type: deviceType },
{ event: "viewHome" }
);
</script>
{% endif %}
{% endblock %}
{% block meta_desc_key %}
{{ parent() }}
{% if app.request.locale == 'pl' %}
{# veltis tag #}
{#
<script async src='https://app.veltis.io/uploads/veltis.js'></script><script>window.veltisData = window.veltisData || []; function veltisTag() { veltisData.push(arguments); } veltisTag('js', new Date()); veltisTag('config', '1aadaf84c154d3e3'); </script>
#}
{% endif %}
{% endblock %}