replace illustration with photo

- align with the new brand

See #537

.gitignore

@@ -4,3 +4,6 @@
 /.cache
 .DS_Store
 /Gemfile.lock
+.jekyll-cache
+.gem
+_site

source/index.html.haml

@@ -3,20 +3,12 @@ title: Flatpak—the future of application distribution
 description: The days of chasing multiple Linux distributions are over. Standalone apps for Linux are here!
 ---
 
-%section.imagebanner.centered
+%section.imagebanner
   .container
     .row.largegap
-      .col-lg-12
+      .col-lg-10.col-lg-offset-1
         %h1.section-heading 
-          The future of 
-          %span.emphasize apps on Linux
-        %p Flatpak is a next-generation technology for building and distributing desktop applications on Linux
-
-%section.illustration.centered
-  .container
-    .row
-      .col-lg-8.col-lg-offset-2
-        = image_tag '/img/delivery_truck2.png'
+          The future of apps on Linux
 
 %section#appsplash.bg-secondary
   .container
@@ -44,7 +36,7 @@ description: The days of chasing multiple Linux distributions are over. Standalo
   .container
     .row.centered
       .col-sm-10.col-sm-offset-1
-        %iframe{'width'=>'100%','height'=>'440', 'src'=>'https://www.youtube.com/embed/jDVCITRWGgs', 'frameborder'=>'0', 'allowfullscreen'=>'true'}
+        %iframe.full{'width'=>'100%', 'src'=>'https://www.youtube.com/embed/jDVCITRWGgs', 'frameborder'=>'0', 'allowfullscreen'=>'true'}
           =link_to 'Flatpak 1.0', 'https://youtu.be/jDVCITRWGgs'
     .row.centered
       .col-sm-6.col-sm-offset-3

source/stylesheets/site.css.scss

@@ -233,29 +233,22 @@ section {
 }
 
 .imagebanner {
-  background: url(/img/banner.svgz) no-repeat center bottom;
+  background: url(/img/container.webp) no-repeat center bottom;
   @media (prefers-color-scheme: dark) {
     filter: brightness(70%);
   }
   background-size: cover;
-  color: rgba(0, 0, 0, 0.5);
-  min-height: 500px;
+  color: #fff;
+  min-height: 50vh;
   z-index: 1;
+  font-weight: 800;
+  font-variation-settings: 'wght' 800;
   p {
     max-width: 30em;
     margin: auto;
   }
 }
 
-.illustration {
-  margin-top: -330px;
-  margin-bottom: 0;
-  z-index: 2; /* under the headline; issue #326 */
-  @media (max-width: 420px) {
-    display: none;
-  }
-}
-
 aside {
   padding: 50px 0;
 }
@@ -437,7 +430,6 @@ pre {
 
 .section-heading {
   margin-top: 0;
-  text-transform: capitalize;
 
   .emphasize {
     color: $key_color;
@@ -655,6 +647,7 @@ iframe.full {
   display: block;
   min-height: 400px;
   width: 100%;
+  aspect-ratio: 16 / 9;
 }
 
 body {