{% extends 'layout/layout.html.twig' %}
{% trans_default_domain 'front_messages' %}
{% block title %}{% endblock %}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('homepage') }}
{% endblock %}
{% block bodyclass %}regalo {% if class_page is defined %} {{ class_page}} {% endif %}{% endblock %}
{% block content %}
<header>
<nav class="regalo_navbar">
{% if not app.user %} <img src="{{ asset('build/images/logo.svg') }}" alt="Regalo, le réseau social du cadeau" class="logo-homepage"> {% endif %}
</nav>
<div class="container-header">
<div class="div-header">
<div class="mockup">
<img class="homepage-mockup" src="{{ asset('build/images/mockup-homepage.png') }}"
alt="Créez votre liste de cadeaux" />
<div style="display:flex; gap: 2%; align-items:center; justify-content:center">
<a href="https://apps.apple.com/fr/app/regalo/id6444314610">
<img class="picture" src="{{ asset('build/images/Apple.svg') }}"
alt="Télécharger sur App Store" style="width:160px"/>
</a>
<a href="https://play.google.com/store/apps/details?id=com.lcom.regalo&hl=fr&gl=US">
<img class="picture" src="{{ asset('build/images/google.png') }}"
alt="Télécharger sur Play Store" style="width:170px"/>
</a>
</div>
</div>
<div class="flex-form">
<h1 class="title">Partagez vos envies avec Regalo!</h1>
<p class="text" style="margin-bottom:0;">Un anniversaire, une fête, Noël, un mariage… toutes les occasions sont bonnes pour offrir des cadeaux à sa famille ou ses amis.</p>
<p class="text" style="margin-bottom:1.5em;">En revanche, il n’est pas toujours facile de trouver les idées…</p>
<p class="text">Regalo permet de mieux connaitre les envies de ses proches et de pouvoir leur offrir un cadeau qui leur fera plaisir à coup sûr !</p>
{% if not app.user %}
<div class="container-form login">
<form class="form" method="post">
<p class="form_title">Se connecter</p>
<div class="button-rs" style="margin-bottom: 5%">
<a href="{{ path('facebook_connect') }}" class="btn-facebook"
title="Se connecter avec Facebook">{{ icon('facebook-white') }} </a>
<a href="{{ path('google_connect') }}" class="btn-google"
title="Se connecter avec Google">{{ icon('google') }} </a>
</div>
<div class="form_input">
<input class="input" type="email" value="{#{ last_username }#}" name="email" id="inputEmail" placeholder="Adresse e-mail" required>
<input class="input" type="password" name="password" value="" id="inputPassword" placeholder="Mot de passe" required>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" >
</div>
<div class="flex-checkbox">
<div class="form_checkbox">
<input type="checkbox" name="_remember_me" id="remember_me"> <label for="remember_me">Se souvenir de moi</label>
</div>
<a class="text forgot" href="{{ path('app_forget_password') }}">Mot de passe oublié ? </a>
</div>
<button class="button-login" type="submit">{{'generics.tologin' | trans }}</button>
</form>
<div class="div-text-register">
<p class="text-register">Vous n'êtes pas encore sur Regalo ?</p>
<a class="button-register" href="#"><p>Inscrivez-vous maintenant</p></a>
</div>
</div>
<div class="container-form register">
{{ form_start(form_register, {attr: {class:'form'}, method : 'POST'}) }}
<p class="form_title">Inscrivez vous</p>
<div class="button-rs">
<a href="" class="btn-facebook"
title="Se connecter avec Facebook">{{ icon('facebook-white') }} </a>
<a href="" class="btn-google" title="Se connecter avec Google">{{ icon('google') }} </a>
</div>
<div class="form_input">
{{ form_widget(form_register.lastname, {attr: {class: 'input'}}) }}
{{ form_widget(form_register.firstname, {attr: {class: 'input'}}) }}
</div>
<div class="form_input">
{{ form_widget(form_register.email, {attr: {class: 'input'}}) }}
{{ form_widget(form_register.plainPassword, {attr: {class: 'input'}}) }}
</div>
<div class="form_checkbox">
{{ form_widget(form_register.agreeTerms)}}
</div>
<button class="button-login" type="submit" name="action" value="register">{{'generics.register' | trans }} </button>
{{ form_end(form_register)}}
<p class="text" style="margin-top:40px;">Vous êtes déjà membre de la communauté REGALO ?</p>
<a class="button-login-link" href="#"><p>{{'generics.tologin' | trans }}</p></a>
</div>
</div>
<div class="header-picture">
</div>
{% endif %}
</div>
</div>
</header>
<main>
<div class="container-home">
<section class="first-section">
<img src="{{ asset('build/images/element-graphique.webp') }}" alt="Element graphique" class="element-graphique-gauche"/>
<img src="{{ asset('build/images/element-graphique.webp') }}" alt="Element graphique" class="element-graphique-droite"/>
<div class="flex-demo">
<div class="first-part">
<h2 class="title">
Créez, organisez et partagez vos listes de cadeaux en ligne
</h2>
<p>
Envie de ne plus jamais vous tromper dans vos choix de cadeaux ? <br/>
Avec notre plateforme, vous pouvez créer facilement vos listes de cadeaux, y ajouter toutes vos envies et les partager avec vos proches en quelques clics. Que ce soit pour un anniversaire, un mariage, une naissance, Noël ou toute autre occasion, vos listes restent accessibles et organisées en ligne.
<br/><br/>Ajoutez en un instant vos idées, personnalisez vos listes et invitez vos amis ou votre famille à les consulter. Grâce au partage, chacun saura exactement quoi offrir, sans doublon ni déception.
Notre solution simple et intuitive vous accompagne pour que chaque fête soit un moment unique, avec des cadeaux vraiment utiles et désirés. <br/><br/>Commencez dès aujourd’hui à créer votre première liste de cadeaux personnalisée et facilitez la vie de vos proches ! </p>
<button> <span class="label"> <a class="button-register" href="#">S’inscrire</a></span> <span class="icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
<path d="M5 12h14M13 6l6 6-6 6"
fill="none"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</span></button>
</div>
<div class="second-part">
<div class="first-step">
<img src="{{ asset('build/images/gift--icon.webp') }}" alt="Gift Icon"/>
<div class="text">
<p class="title-step">
Créez votre liste de cadeaux gratuitement
</p>
<p>
Avec Regalo, il n’a jamais été aussi facile d’écrire ses envies, ses souhaits, ses préférences, ses styles… Créez votre liste sur mesure pour un anniversaire, un mariage, une naissance, une soirée...
</p>
</div>
</div>
<div class="second-step">
<img src="{{ asset('build/images/add-gift--icon.webp') }}" alt="Gift Icon"/>
<div class="text">
<p class="title-step">
Ajoutez des cadeaux à votre liste
</p>
<p>
Trouvez le cadeau qui vous convient en intégrant un lien pour que vos amis puissent le consulter. Vous êtes libre d'ajouter autant de produits que vous le souhaitez. </p>
</div>
</div>
<div class="third-step">
<img src="{{ asset('build/images/share-gift--icon.webp') }}" alt="Gift Icon"/>
<div class="text">
<p class="title-step">
Partagez votre liste de cadeaux avec vos divers cercles d'amis.
</p>
<p>
Diffusez votre liste de cadeaux au sein de vos différents cercles d'amis, que ce soit votre cercle proche, restreint ou large.</p>
</div>
</div>
</div>
</section>
</div>
<section class="second-section" >
<div class="flex-demo">
<div class="first-part">
</div>
<div class="second-part">
<div class="text">
<h2 class="title">
Regalo <br/> Simplifiez vos listes de cadeaux partout et à tout moment
</h2>
<p>
Créez, organisez et partagez vos listes de cadeaux directement depuis votre smartphone. Ajoutez vos idées en quelques clics, classez-les par événements et invitez vos proches à les découvrir sans doublon ni oubli. Avec les notifications et le partage sécurisé, vos envies restent toujours accessibles et à jour.
<br/>Téléchargez l’application et gardez vos listes de cadeaux toujours à portée de main ! </p>
</div>
</div>
</div>
</section>
<section class="third-section">
<div class="container-home">
<h2 class="title">Regalo vous permet de concevoir des listes de cadeaux pour toutes occasions.</h2>
<div style="display :flex; gap: 10%; margin-top: 10%; justify-content: center; flex-wrap:wrap">
<div class="card-list">
<img class="picture" src="{{ asset('build/images/list-default/anniversaire.gif') }}"
alt="Découvrez ce qu'aiment vos proches"/>
<p class="title">Anniversaire</p>
<p class="subtitle">Aidez vos amis à choisir le cadeau parfait en créant votre liste
d'anniversaire. Ils pourront facilement y accéder et trouver le présent qui vous fera
plaisir.</p>
</div>
<div class="card-list">
<img class="picture" src="{{ asset('build/images/list-default/apero.gif') }}"
alt="Découvrez ce qu'aiment vos proches"/>
<p class="title">Apéro</p>
<p class="subtitle">Facilitez la vie de vos amis pour choisir les boissons en créant votre liste
d'apéro. Ils auront un accès simple pour trouver ce qui vous fait plaisir.</p>
</div>
<div class="card-list">
<img class="picture" src="{{ asset('build/images/list-default/cremaillere.gif') }}"
alt="Découvrez ce qu'aiment vos proches"/>
<p class="title">Crémaillère</p>
<p class="subtitle">Soyez accompagné pour votre pendaison de crémaillère en créant une liste.
Vos amis pourront facilement y jeter un œil et trouver le cadeau idéal.
</p>
</div>
<div class="card-list">
<img class="picture" src="{{ asset('build/images/list-default/mariage.gif') }}"
alt="Découvrez ce qu'aiment vos proches"/>
<p class="title">Mariage</p>
<p class="subtitle">Facilitez la tâche de vos invités en créant une liste de mariage. Ils
pourront ainsi trouver facilement le cadeau qui vous fera plaisir.</p>
</div>
<div class="card-list">
<img class="picture" src="{{ asset('build/images/list-default/naissance.gif') }}"
alt="Découvrez ce qu'aiment vos proches"/>
<p class="title">Naissance</p>
<p class="subtitle">Soyez pratique pour vos proches en créant une liste de naissance. Ainsi, ils pourront aisément trouver le cadeau parfait pour le nouveau-né.</p>
</div>
<div class="card-list">
<img class="picture" src="{{ asset('build/images/list-default/noel.gif') }}"
alt="Découvrez ce qu'aiment vos proches"/>
<p class="title">Noël</p>
<p class="subtitle">Facilitez la tâche de vos invités en créant une liste de noël. Ils pourront ainsi trouver facilement le cadeau qui vous fera plaisir.
</p>
</div>
</div>
<div class="card-other">
<div class="text-card">
<p class="title">
Encore pleins d'occasions
</p>
<p class="subtitle">
Rendez la sélection de cadeaux encore plus spéciale en créant une liste personnalisée. Vos
amis auront ainsi la possibilité de choisir des présents qui reflètent parfaitement vos
goûts et préférences.
</p>
</div>
</div>
</section>
<section class="fourth-section">
<div class="container-home">
<h2 class="title" id="faq">Vous vous posez sûrement des questions ?</h2>
<p class="subtitle">Nous pouvons y répondre !</p>
<div class="faq">
<div class="accordeon">
<h2 class="faq-title"><span>A quoi sert la confidentialité ?</span></h2>
<p class="content">
La confidentialité sert à protéger les informations<strong style="color:#D41F25"> sensibles </strong> ou
<strong style="color:#D41F25">privées</strong> des individus contre l'accès ou la divulgation non autorisée.
Cela peut inclure des données personnelles, des communications privées, des informations
financières, etc.</p>
</div>
<div class="accordeon">
<h2 class="faq-title"><span>Regalo est-il payant ?</span></h2>
<p class="content">
Non, <strong style="color:#D41F25">le site est totalement gratuit</strong> ! Vous pourrez profiter de notre solution sans avoir à dépenser le moindre centime, ni à vous abonner. Notre modèle de rémunération est pensé autour des partenariats avec les marques.
</p>
</div>
<div class="accordeon">
<h2 class="faq-title"><span>A quoi correspondent les différents niveaux de confidentialité ?</span>
</h2>
<p class="content">
Les différents niveaux de confidentialité peuvent correspondre à différents paramètres
de sécurité ou de visibilité pour les informations partagées sur la plateforme, tels que
<strong style="color:#D41F25">proche</strong>, ou <strong style="color:#D41F25">large </strong>à un
groupe spécifique d'utilisateurs.
</p>
</div>
</div>
</div>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.carousel').slick({
"slidesToShow": 1,
"slidesToScroll": 1,
"autoplay": true,
"infinite": true,
"arrows": true,
"speed": 500
});
});
var app = {
init: function () {
app.title = document.querySelectorAll('.faq-title')
for (var i = 0; i < app.title.length; ++i) {
app.title[i].addEventListener('click', app.togglefaq)
}
app.Register = document.querySelector('.register')
app.BtnRegister = document.querySelector('.button-register')
app.BtnRegister.addEventListener('click', app.FuncRegister)
app.Login = document.querySelector('.login')
app.BtnLogin = document.querySelector('.button-login-link')
app.BtnLogin.addEventListener('click', app.FuncLogin)
app.BtnRegister = document.querySelectorAll('.button-register')
app.BtnRegister.forEach(function(btn){
btn.addEventListener('click', app.FuncRegister)
})
},
FuncRegister: function(event){
app.Register.style.display = 'block';
app.Login.style.display = 'none';
},
FuncLogin: function(event){
app.Register.style.display = 'none';
app.Login.style.display = 'block';
},
togglefaq: function(event){
let clicked = event.target;
if( clicked.nodeName === "SPAN") {
clicked = event.target.parentNode;
}
let classes = clicked.classList;
classes.toggle('open');
for (var i = 0; i < app.title.length; ++i) {
if (app.title[i] !== clicked) {
app.title[i].classList.remove('open');
}
}
}
};
document.addEventListener('DOMContentLoaded', app.init);
</script>
{% endblock %}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('homepage') }}
{% endblock %}