Redo .NET banner (#8967)

The banner is broken on INT as the image wasn't included in the release artifacts. Also the previous implementation used a padding hack to force a container to have a minimal height. This solution did not work well on very wide screens as it caused the background image to be noticeably clipped. This new solution looks much better on very wide screens and removes the padding hack.

Follow up to #8966
Part of: https://github.com/NuGet/Engineering/issues/4226

Author: loic-sharma

src/Bootstrap/dist/css/bootstrap-theme.css

@@ -10,35 +10,51 @@
   }
 
   div.dotnet-20-banner {
-    background: black url(../img/dotnet-20-banner.svg);
-    background-repeat: no-repeat;
-    background-position: 0 -150px;
-    background-size: cover;
+    position: relative;
     margin-top: 32px;
   }
 
   .dotnet-20-banner {
-    .container {
-      // The padding bottom is a hack to force the container's height to
-      // be at least as big as its content. This ensures the background
-      // image covers the entire container on narrow screens.
-      padding-top: 20px;
-      padding-bottom: 140px;
-      color: white;
+    .dotnet-20-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        background-color: #000;
+      }
+    }
 
+    .container {
       .row {
-        margin-bottom: 40px;
+        color: white;
+
+        @media (max-width: @screen-md-max) {
+          margin-top: 48px;
+          margin-bottom: 48px;
+        }
+
+        @media (min-width: @screen-md-max) {
+          margin-top: 144px;
+          margin-bottom: 144px;
+        }
 
         .banner-text {
           backdrop-filter: blur(2px);
 
           h2 {
+            margin-top: 0px;
             font-weight: 600;
           }
 
           h3 {
             margin-top: 0px;
-            font-weight: 600;
+            font-weight: 400;
           }
 
           a {
@@ -52,14 +68,6 @@
     }
   }
 
-  // The banner uses a hack to ensure its container is tall enough
-  // on narrow screens. This offsets that hack.
-  .what-is-nuget-with-banner {
-    @media (max-width: @screen-sm-max) {
-      margin-top: -120px;
-    }
-  }
-
   .what-is-nuget {
     font-size: 1.15em;
     padding-bottom: 75px;

src/Bootstrap/less/theme/page-home.less

@@ -1348,6 +1348,7 @@
     <Content Include="Content\gallery\img\circuit-board.svg" />
     <Content Include="Content\gallery\img\default-package-icon-256x256.png" />
     <Content Include="Content\gallery\img\default-package-icon.svg" />
+    <Content Include="Content\gallery\img\dotnet-20-banner.svg" />
     <Content Include="Content\gallery\img\dotnet-foundation-42x42.png" />
     <Content Include="Content\gallery\img\dotnet-foundation.svg" />
     <Content Include="Content\gallery\img\facebook-24x24.png" />

src/NuGetGallery/NuGetGallery.csproj

@@ -77,6 +77,9 @@ else if (AskUserToEnable2FA)
     @if (Model.ShowDotnet20Banner)
     {
         <div class="dotnet-20-banner">
+            <div class="dotnet-20-image">
+                <img src="~/Content/gallery/img/dotnet-20-banner.svg" aria-hidden="true" />
+            </div>
             <div class="container">
                 <div class="row">
                     <div class="banner-text col-md-8">
@@ -96,7 +99,7 @@ else if (AskUserToEnable2FA)
         </div>
     }
 
-    <div class="container text-center what-is-nuget @(Model.ShowDotnet20Banner ? "what-is-nuget-with-banner" : "") ">
+    <div class="container text-center what-is-nuget">
         <div class="row">
             <h2>What is NuGet?</h2>
             <p>