{% extends "front-office/_base.html.twig" %}
{% block script %}
<script defer src="{{ asset("assets/js/home.js") }}"></script>
{% endblock %}
{% block content %}
<section class="home-top meli-between-start">
{% if showVideo %}
<div class="video-box-background">
<div class="video-box meli-center-center">
<video src="{{ asset('assets/video/open.mov') }}"
type="video/mov"
muted
autoplay
id="welcomeVideo"
></video>
</div>
</div>
{% endif %}
<div class="aside meli-width-30 bgc-green" >
<div class="title-box" id="topAside"
{% if showVideo %}
style="opacity: 0;"
{% endif %}
>
<h1 class="txt-h1-home title">
Bienvenue dans ma cabane
</h1>
<p class="txt-h2-dancing subtitle meli-width-60">
Pas besoin de se prendre au sérieux <br>
pour coudre sérieusement...
</p>
<a href="{{ path('story') }}">
<button class="btn-base button-story">
<span>Notre histoire</span>
</button>
</a>
</div>
</div>
<div class="img-box meli-width-70">
<img src="{{ asset('assets/img/home/sophie-ma-cabane.jpg') }}" alt="Bienvenue dans ma cabane">
</div>
</section>
{# HOME TOP RESPONSIVE #}
<section class="resp-home-top bgc-darkGreen meli-flex-col meli-between-center">
<h1 class="txt-h1-home title txt-center">Bienvenue dans ma cabane</h1>
<p class="txt-h2-dancing subtitle txt-center">
Pas besoin de se prendre au sérieux <br>
pour coudre sérieusement...
</p>
<div class="meli-center-center">
<a href="{{ path('story') }}">
<button class="btn-base button-story">
<span>Notre histoire</span>
</button>
</a>
</div>
</section>
{% if lastFormations is not empty %}
<section class="home-formation">
<h2 class="title-h2 txt-dancing txt-bold txt-size40 txt-center txt-green">
Les Formations
</h2>
<p class="intro meli-section-60 txt-regular txt-orange txt-century txt-regular txt-size20">
Véritables cours de couture, je vous propose mes capsules. Prenons ensemble le prétexte de réalisations,
à partir de patrons originaux, et balayons les techniques et gestes du couturier en vidéo. Je vous
montre chaque étape minutieusement et vous guide. Je vous donne également accès à des ressources écrites
( PDF) pour vous aider à structurer votre parcours d’apprentissage. <br>
Suivez moi pas à pas et vous serez à votre tour capable de réaliser vos propres capsules de vêtements !
</p>
<div class="last-formations meli-section-90 meli-evenly-start">
{% for f in lastFormations %}
<div class="item meli-width-25">
<a href="{{ path('formation_read',{'id':f.id,'slug':f.name|url}) }}">
<div class="filter"></div>
<div class="img-box">
{% if f.picture is not null %}
<img src="{{ asset('uploads/formations/formation-'~f.id~'/'~f.picture) }}"
alt="{{ f.pictureAlt }}">
{% else %}
<img src="{{ asset('assets/img/logo/logo-couleur.png') }}"
alt="{{ f.name }}">
{% endif %}
</div>
<div class="text-box">
<h3 class="title txt-century txt-bold txt-size20 txt-orange">
{{ f.name }}
</h3>
<p class="description txt-century txt-regular txt-size15 txt-lightGreen">
{% set limit = 50 %}
{{ f.description|raw|length > limit ? f.description|truncate(limit,"...")|raw : f.description|raw }}
</p>
<p class="price txt-century txt-regular txt-orange txt-size15">
{{ f.priceTTC|number_format(2,","," ") }} €
</p>
</div>
</a>
</div>
{% endfor %}
</div>
<div class="button-box meli-center-center">
<a href="{{ path('formation_list') }}">
<button class="btn-base">
<span>Accéder aux formations</span>
</button>
</a>
</div>
</section>
{% else %}
<section class="home-formation">
<h2 class="title-h2 txt-dancing txt-bold txt-size40 txt-center txt-green">
Les Formations
</h2>
<p class="intro meli-section-60 txt-regular txt-orange txt-century txt-regular txt-size20 txt-center">
Nos formations sont en cours de création
</p>
</section>
{% endif %}
<section class="home-pattern">
<h2 class="title-h2 txt-dancing txt-bold txt-size40 txt-center txt-green">
Les Patrons
</h2>
{% if homeSewings is not empty %}
<div class="items-container">
<p class="intro txt-century txt-bold txt-size20 txt-green meli-section-30">
Retrouvez les patrons de la chaîne Youtube
SEWING SO ET LA CABANE A COUDRE
</p>
<div class="row meli-evenly-start meli-section-90">
{% for s in homeSewings %}
<div class="item meli-width-25">
<a href="{{ path('sewing_read',{'id':s.id,'slug':s.name|url}) }}">
<div class="img-box meli-center-center">
<img src="{{ asset('uploads/sewings/sewing-'~s.id~'/'~s.picture) }}"
alt="{{ s.pictureAlt }}">
</div>
<div class="text-box">
<h3 class="title txt-century txt-bold txt-size20 txt-green">
{{ s.name }}
</h3>
<p class="price txt-century txt-regular txt-green txt-size15">
{{ (s.priceHt*(1+s.tva))|number_format(2,","," ") }} €
</p>
</div>
</a>
</div>
{% endfor %}
</div>
<div class="button-box meli-center-center">
<a href="{{ path('sewing_list') }}">
<button class="btn-base">
<span>Les patrons</span>
</button>
</a>
</div>
</div>
{% else %}
<div class="items-container">
<p class="intro txt-century txt-bold txt-size20 txt-green meli-section-50 txt-center">
Retrouvez prochainement les patrons de la chaîne <br> Youtube
SEWING SO ET LA CABANE A COUDRE
</p>
</div>
{% endif %}
</section>
<section class="home-youtube bgc-green meli-around-center">
<div class="img-box meli-flex-col meli-width-10 meli-center-center">
<img src="{{ asset('assets/img/home/sewingso-youtube.jpeg') }}" alt="Sewing So">
</div>
<div class="text-box meli-width-40">
<h2 class="title txt-century txt-bold txt-white txt-size20"
>Sewing so & La Cabane à Coudre</h2>
<p class="txt-century txt-regular txt-white txt-size20">
En tant que couturière professionnelle, j’ai grand plaisir à me lancer dans la création de nouveaux
patrons et la découverte de nouvelles techniques. Le monde de la couture est si vaste. Pour autant, je
crois que le plaisir doit beaucoup au fait de partager. Retrouvez mes tutoriels, mes astuces et conseils
sur ma petite chaîne, <br>
Bonnes cousettes !
</p>
</div>
<div class="youtube-box meli-between-center meli-width-25">
<div class="meli-width-60">
<p class="txt-century txt-bold txt-size20 txt-white">
Retrouvez Sewing So sur Youtube
</p>
</div>
<div class="icon-box meli-width-35">
<a href="https://www.youtube.com/c/SewingSoLaCabane%C3%A0coudre" target="_blank">
<img src="{{ asset('assets/img/icons/bouton-youtube.png') }}" alt="Chaîne Youtube ">
</a>
</div>
</div>
</section>
{% if reviews is not empty %}
<section class="home-testimony">
<h2 class="title-h2 txt-dancing txt-bold txt-size40 txt-center txt-green">
Témoignages clients
</h2>
<div class="items-container meli-section-85">
{% include "front-office/partials/_reviews.html.twig" %}
</div>
</section>
{% endif %}
<div class="home-line-orange meli-section-90"></div>
{% if frontpageArticles is not empty %}
<section class="home-blog">
<h2 class="title-h2 txt-dancing txt-bold txt-size40 txt-center txt-green">
Blog
</h2>
<div class="meli-section-70 partial-section">
{% include "front-office/partials/_blog_frontpage.html.twig" %}
</div>
</section>
{% endif %}
<section class="home-contact">
<div>
{% include "front-office/partials/_form_contact.html.twig" %}
</div>
</section>
{% endblock %}