funky-framadate-front/src/app/core/components/home/home.component.html

<section class="hero">
	<div class="hero-body">
		<div class="container">
			<div class="column">
				<section class="creation">
					<h1 class="title is-1 is-centered">
						{{ 'home.create_button' | translate }}
					</h1>
					<p class="subtitle">
						{{
							'SENTENCES.framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily'
								| translate
						}}
					</p>

					<div class="container is-max-desktop">
						<a role="button" class="button is-fullwidth is-primary is-size-3" routerLink="administration">
							{{ 'config.letsgo' | translate }}
						</a>
					</div>
				</section>
				<section class="search">
					<h1 class="title is-1 is-centered">
						{{ 'home.search_title' | translate }}
					</h1>

					<ul class="poll-list">
						<li *ngFor="let p of storageService.userPolls">
							<a
								class="button is-fullwidth padded"
								[routerLink]="'poll/' + p.custom_url + '/consultation'"
							>
								{{ p.title }}
								<i class="fa fa-arrow-right pull-right"></i>
							</a>
						</li>
					</ul>
					<form (ngSubmit)="searchMyPolls()">
						<div class="search-others">
							<label for="search_others">
								Je cherche d'autres sondages, qui correspondent à mon mail :
							</label>
							<input type="email" id="search_others" [ngModel]="storageService.vote_stack.owner.email" />
							<button
								type="submit"
								role="button"
								class="button is-outlined is-fullwidth is-info is-size-3"
								[disabled]="!storageService.vote_stack.owner.email.length"
								routerLink="user/polls"
							>
								<i class="fa fa-search"></i>
								{{ 'home.search_button' | translate }}
							</button>
						</div>
					</form>
				</section>

				<blockquote class="notification is-info is-light content is-size-3 has-text-weight-light">
					<h1 class="title">
						{{ 'home.title' | translate }}
						{{ environment.appTitle }}
					</h1>
					<i class="fa fa-poll"></i>
					{{
						'SENTENCES.framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily'
							| translate
					}}
				</blockquote>

				<img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image WIP" />
			</div>
			<div class="columns">
				<div class="column">
					<h2 class="subtitle">
						{{ 'home.subtitle' | translate }}
					</h2>
				</div>
				<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" />
				</div>
			</div>

			<div class="column">
				<div class="columns">
					<div class="column">
						<h2 class="title is-2">
							<i class="fa fa-format-paint"></i>
							{{ 'SENTENCES.here-is-how-it-works' | translate }}
						</h2>
						<p>
							{{ 'SENTENCES.send-the-poll-link-to-your-friends-or-colleagues' | translate }}

							{{ 'SENTENCES.what-you-can-do' | translate }}
						</p>
						<h2 class="title is-2">
							<i class="fa fa-format-paint"></i>
							{{ 'SENTENCES.view-an-example' | translate }}
						</h2>
						<p>
							<a href="/poll/orange-ou-citron/consultation" class="btn btn-info">
								<i class="fa fa-biking"></i> Orange ou citron?
							</a>
						</p>
						<p>
							<i class="fa fa-gavel"></i>

							{{ 'SENTENCES.framadate-is-licensed-under-the' | translate }}
							<span class="licence has-text-weight-medium">
								<i class="fa fa-gnu"></i>
								GNU Affero v3 Licence
							</span>
						</p>
					</div>

					<div class="column">
						<h2 class="title is-2">
							<i class="fa fa-seeding"></i>
							{{ 'SENTENCES.grow-your-own' | translate }}
						</h2>
						<p>
							{{
								'SENTENCES.if-you-want-to-install-the-software-for-your-own-use-and-thus-increase-your-independence-we-can-help'
									| translate
							}}
							{{
								'SENTENCES.to-participate-in-the-software-development-suggest-improvements-or-simply-download-it-please-visit'
									| translate
							}}
							{{ 'SENTENCES.the-development-site' | translate }}
						</p>
					</div>
				</div>
			</div>
			<!--			statistiques-->
			<p class="title">Statistiques</p>
			<app-wip-todo></app-wip-todo>
			<div class="tile is-ancestor">
				<div class="tile is-4 is-vertical is-parent">
					<div class="tile is-child box">
						<div class="title">
							<i class="fa fa-check-circle"></i>
							62 346
						</div>
						<p>sondages</p>
					</div>
					<div class="tile is-child box">
						<div class="title">
							<i class="fa fa-tachometer"></i>
							223 124
						</div>
						<p>votes</p>
					</div>

					<div class="tile is-child box">
						<div class="title">
							<i class="fa fa-comment-o"></i>
							41 875
						</div>
						<p>commentaires</p>
					</div>
				</div>
				<div class="tile is-parent">
					<div class="tile is-child box">
						<div class="title">
							<i class="fa fa-calendar-check-o"></i>
							44 985
						</div>
						<p>sondages de type date</p>
					</div>

					<div class="tile is-child box">
						<div class="title">
							<i class="fa fa-file-epub"></i>
							22 985
						</div>
						<p>sondages de type classique</p>
					</div>
					<div class="tile is-child box">
						<div class="title">
							<i class="fa fa-check-circle-o"></i>
							123
						</div>
						<p>consensus parfaits</p>
					</div>
				</div>
			</div>
			<div class="box">
				<h2 class="title">Nos Mentions légales</h2>
				<ul>
					<li>
						<a href="/legal">
							mentions légales,
						</a>
					</li>
					<li>
						<a href="/cgu">
							CGU, CPU,
						</a>
					</li>
					<li>
						<a href="/privacy">
							politique de confidentialité.
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</section>