feat(landing): add cover image

assets/sass/landing.scss

@@ -2,11 +2,27 @@
     width: 100%;
 }
 
-.landing {
+.landing-border {
+    border: 2px solid rgba(0, 0, 0, 0.4);
+    border-radius: 4px;
+}
+
+.landing-two-sections {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    @extend .landing-border;
+}
+
+.landing-cover {
+    img {
+        object-fit: cover;
+        object-position: center;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 .landing-brand {
-    border: 1px solid rgba(0, 0, 0, 0.4);
     padding: 1rem;
     text-align: center;
     display: flex;
@@ -27,9 +43,6 @@
     
 }
 
-.brand__role2 {
-}
-
 .brand__logo {
     svg {
         max-width: 25rem;
@@ -37,3 +50,21 @@
     }
 }
 
+@media (max-width: $md-breakpoint) {
+    .landing-two-sections {
+        display: block;
+    }
+    .landing-cover {
+        img {
+            height: 13rem;
+        }
+    }
+    .landing-brand {
+        .brand__logo svg {
+            max-width: 15rem;
+        }
+        .brand__name {
+            font-size: 2.5rem;
+        }
+    }
+}

layouts/index.html

@@ -1,7 +1,15 @@
 {{ define "main" }}
 	<main class="page-container">
         <div class="landing">
-            <div class="landing-one">
+            <div class="landing-two-sections">
+                <div class="landing-cover">
+                    {{ $featuredImage := (resources.Get (printf "%s" ("images/cover_big.jpg" | safeURL))) }}
+                    {{ $featuredImage := $featuredImage.Fill "800x500 Center" }}
+                    <img
+                        alt="Laurent en plein travail de réparation sur un vélo"
+                        src="{{ $featuredImage.RelPermalink }}"
+                    />
+                </div>
                 <div class="landing-brand">
                     <div class="brand__logo landing-half-wheel-logo">
                         {{ partial "svg" "half_wheel_logo" }}
@@ -12,10 +20,11 @@
                     </div>
                     <div class="brand__role2">Réparation &amp; Entretien - Toutes marques</div>
                 </div>
-                <div class="landing-description">
-                    {{ .Content }} 
-                </div>
             </div>
+            <div class="landing-description">
+                {{ .Content }} 
+            </div>
+        </div>
         </div>
 	</main>
 {{ end }}