grandlyon-sau: add homepage template and styles (#24509)

static/grandlyon-sau/_custom.scss

@@ -2,6 +2,11 @@
 
 body {
 	background: $body-background;
+	&.homepage {
+		background: linear-gradient(to bottom, transparent 0%, white 20%), url('img/homepage-bg.png');
+		background-repeat: repeat-x;
+		background-position: left 180px;
+	}
 }
 
 div#nav {
@@ -278,6 +283,58 @@ div.cell > div {
 			}
 		}
 	}
+	div.homepage-container {
+		@include vendor-prefix(flex-grow, 1);
+		* {
+			background-color: transparent;
+		}
+		div.services {
+			@include flexbox();
+			@include vendor-prefix(justify-content, center);
+			@include vendor-prefix(flex-wrap, wrap);
+			> div {
+				width: 350px;
+				@media screen and (max-width: $mobile-limit) {
+					width: 100%;
+				}
+				a {
+					width: 100%;
+					border: 1px solid #000000;
+					text-align: center;
+					color: #FFFFFF;
+					&:hover {
+						border-color: $primary-color;
+					}
+				}
+			}
+			@each $service in (grandlyon-connect, trabool) {
+				div.#{$service} {
+					a {
+						background-image: url('img/service-#{$service}.png');
+						background-repeat: no-repeat;
+						background-size: 200px auto;
+						background-position: center top;
+						padding-top: 150px;
+						position: relative;
+						box-sizing: border-box;
+						&:hover {
+							background-image: url('img/service-#{$service}-on.png');
+							&::after {
+								background-color: $primary-color;
+							}
+						}
+						&::after {
+							position: absolute;
+							top: 145px;
+							background-color: #000000;
+							display: block;
+							height: calc(100% - 145px);
+						}
+					}
+				}
+			}
+		}
+	}
 }
 #footer a.metro {
 	color: inherit;

templates/variants/grandlyon-sau/combo/page_template_homepage.html

@@ -0,0 +1,15 @@
+{% extends "combo/page_template.html" %}
+{% load combo %}
+
+{% block bodyclasses %}{{ block.super }} homepage{% endblock %}
+
+{% block combo-content %}
+<div class="homepage-container">
+  <div class="homepage-header">
+    {% placeholder "homepage-header" name="En-tête" %}
+  </div>
+  <div class="services">
+  {% placeholder "content" name="Services" %}
+  </div>
+</div>
+{% endblock %}