retouch homepage, add title html

src/app/core/components/home/home.component.html

@@ -1,5 +1,20 @@
 <section class="hero">
 	<div class="hero-body">
+		<div class="columns presentation">
+			<div class="column">
+				<h2 class="title is-2">
+					Organisez des évènements ou récoltez l’opinion de vos proches, simplement, librement.
+				</h2>
+				<p>
+					Grâce à Framadate planifiez, organisez et prenez des décisions rapidement, simplement et sans
+					inscription.
+				</p>
+			</div>
+			<div class="column">
+				<img src="assets/img/icone_home.png" alt="calendrier icone framadate" />
+			</div>
+		</div>
+
 		<div class="container">
 			<div class="column">
 				<section class="creation">
@@ -22,7 +37,9 @@
 						*ngIf="environment.showDemoWarning"
 						class="demo demo-warning well has-background-warning-light padded marged"
 					>
+						<h3 class="title is-3">
 							Ce que l'on peut faire sur cette démo:
+						</h3>
 						<ul>
 							<li>
 								☑️ Créer un nouveau sondage
@@ -39,7 +56,9 @@
 								>
 							</li>
 						</ul>
+						<h3 class="title is-3">
 							Ce qu'on ne peut pas encore faire:
+						</h3>
 						<ul>
 							<li>
 								🚴‍️ mettre à jour son vote à un sondage
@@ -58,6 +77,8 @@
 					<h1 class="title is-1 is-centered">
 						{{ 'home.search_title' | translate }}
 					</h1>
+
+					<img src="assets/img/where-is-it.jpg" alt="batman veut savoir où sont ses sondages" />
 					<div class="poll-list">
 						<ul>
 							<li *ngFor="let p of storageService.userPolls">
@@ -75,7 +96,7 @@
 					<form (ngSubmit)="searchMyPolls()">
 						<div class="search-others">
 							<label for="search_email">
-								Je cherche d'autres sondages, qui correspondent à mon mail :
+								{{ 'home.search_subtitle' | translate }}
 							</label>
 							<input
 								type="email"
@@ -139,9 +160,11 @@
 				<div class="column"></div>
 			</div>
 			<div class="columns">
-				<div class="column"></div>
 				<div class="column">
-					<img src="assets/img/kind/classic.jpeg" alt="sondage date" />
+					<img src="assets/img/kind/date.jpeg" alt="sondage date" />
+				</div>
+				<div class="column">
+					<img src="assets/img/kind/classic.jpeg" alt="sondage classique" />
 				</div>
 			</div>
 

src/app/core/components/home/home.component.scss

@@ -1,5 +1,9 @@
+@import '../../../../styles/variables';
+
 :host {
 	text-align: center;
+	margin-left: -2em;
+	margin-right: -2em;
 	a .fa {
 		margin-right: 1ch;
 	}
@@ -9,4 +13,7 @@
 	.poll-list {
 		margin: 2em 0;
 	}
+	.presentation {
+		background: $secondary_color;
+	}
 }

src/app/core/components/home/home.component.ts

@@ -4,6 +4,7 @@ import { StorageService } from '../../services/storage.service';
 import { ApiService } from '../../services/api.service';
 import { ToastService } from '../../services/toast.service';
 import { DOCUMENT } from '@angular/common';
+import { Title } from '@angular/platform-browser';
 
 @Component({
 	selector: 'app-home',
@@ -18,8 +19,11 @@ export class HomeComponent {
 		@Inject(DOCUMENT) private document: any,
 		public storageService: StorageService,
 		public toastService: ToastService,
+		public titleService: Title,
 		private api: ApiService
-	) {}
+	) {
+		this.titleService.setTitle(environment.appTitle + ' - Accueil ');
+	}
 
 	searchMyPolls() {
 		const email = this.storageService.vote_stack.owner.email;

src/assets/i18n/FR.json

@@ -5,7 +5,8 @@
 	"home": {
 		"title": "Bienvenue sur",
 		"subtitle": "Se consulter simplement pour s’organiser collectivement.",
-		"search_title": "Où sont mes sondages? ",
+		"search_title": "Vous avez déjà créé un sondage et vous souhaitez y accéder ?",
+		"search_subtitle": "Saisissez votre adresse e-mail et nous vous enverrons le lien vers votre sondage. ",
 		"create_button": "Créer un nouveau sondage ",
 		"search_button": "Rechercher"
 	},

src/styles/partials/_main.scss

@@ -4,7 +4,6 @@ main {
 	display: block;
 	width: 100%;
 	margin: 0 auto;
-	padding: 0 2rem;
 }
 .main-block {
 	min-height: 20em;

src/styles/themes/_base.scss

@@ -4,7 +4,6 @@
 	main {
 		margin-bottom: 2em;
 		padding-bottom: 5em;
-		padding-top: 1em;
 		background: $white;
 	}
 	.big-header {