feat(about): add open source screenshot

src/app/pages/landing/about/about-benefits/about-benefits.component.html

@@ -21,10 +21,12 @@ <h2>Why use sign.mt?</h2>
             </div>
             <div class="graphic">
               @switch (slide.id) { @case ('real-time') {
-              <img [src]="iOSScreenshot" aria-labelledby="translate-signed-spoken" class="screenshot" />
+              <img [src]="iOSScreenshot" alt="iOS Application Screenshot" class="phone-screenshot" />
               } @case ('multilingual') {
               <app-lazy-map></app-lazy-map>
-              } @case ('appearance') { } @case ('open-source') { } @case ('offline') { } }
+              } @case ('appearance') { } @case ('open-source') {
+              <img src="assets/promotional/about/github-hero.webp" alt="GitHub Screenshot" class="github-screenshot" />
+              } @case ('offline') { } }
             </div>
           </ion-card-content>
         </ion-card>

src/app/pages/landing/about/about-benefits/about-benefits.component.scss

@@ -87,6 +87,7 @@ ion-card-content {
 
   .graphic {
     height: 100%;
+    display: flex;
     text-align: center;
     flex-shrink: 0;
     flex-grow: 1;
@@ -96,10 +97,21 @@ ion-card-content {
       width: 100%;
     }
 
-    .screenshot {
-      max-width: 300px;
+    .phone-screenshot {
+      max-width: calc(100% - 64px);
+      margin: auto;
+      @media #{$breakpoint-gt-sm} {
+        max-width: 350px;
+        margin-top: 64px;
+        margin-inline-end: 32px;
+      }
+    }
+
+    .github-screenshot {
+      margin: 32px;
+      max-width: calc(100% - 64px);
       @media #{$breakpoint-gt-sm} {
-        margin: 64px 32px 0;
+        margin: 64px;
       }
     }
   }