Migrate onboarding/bonus/beta program templates to Bootstrap 5 (#26344)

* Migrate the Try Premium for free page to Bootstrap 5

* Migrate the Overleaf Beta Program page to Bootstrap 5

* Fix buttons alignment on smaller screen size

* Migrate the Overleaf Bonus Program page to Bootstrap 5

GitOrigin-RevId: 811db783af6a86ab472aae95e075bfa301786a31

services/web/frontend/stylesheets/bootstrap-5/pages/all.scss

@@ -53,3 +53,5 @@
 @import 'admin/admin';
 @import 'admin/project-url-lookup';
 @import 'add-secondary-email-prompt';
+@import 'try-premium';
+@import 'bonus';

services/web/frontend/stylesheets/bootstrap-5/pages/bonus.scss

@@ -0,0 +1,62 @@
+#bonus {
+  margin-top: var(--spacing-06);
+
+  p.thanks {
+    margin-top: var(--spacing-04);
+    text-align: center;
+  }
+
+  .number {
+    position: absolute;
+    margin-left: -13px;
+    width: 26px;
+    padding: var(--spacing-01) 0;
+    text-align: center;
+    background-color: #ddd;
+
+    &.active {
+      background-color: var(--bg-info-01);
+      color: var(--content-primary-dark);
+    }
+
+    border-radius: 3px;
+  }
+
+  .progress {
+    margin-top: var(--spacing-05);
+    margin-left: calc(var(--spacing-06) * -1);
+    margin-right: calc(var(--spacing-06) * -1);
+    height: 30px;
+  }
+
+  .perk {
+    position: absolute;
+    background-color: var(--bg-light-tertiary);
+    border-radius: var(--border-radius-base);
+    text-align: center;
+    padding: var(--spacing-02);
+    min-width: min-content;
+    width: 110px;
+    margin-left: calc(var(--spacing-11) * -1);
+    font-size: 14px;
+
+    &::before {
+      border-bottom: var(--spacing-04) solid var(--bg-light-tertiary);
+      border-left: var(--spacing-04) solid transparent;
+      border-right: var(--spacing-04) solid transparent;
+      content: '';
+      position: absolute;
+      left: var(--spacing-10);
+      top: calc(var(--spacing-04) * -1);
+    }
+
+    &.active {
+      color: white;
+      background-color: var(--bg-info-01);
+
+      &::before {
+        border-bottom: var(--spacing-04) solid var(--border-active);
+      }
+    }
+  }
+}

services/web/frontend/stylesheets/bootstrap-5/pages/try-premium.scss

@@ -0,0 +1,42 @@
+.try-premium-page {
+  .try-premium-logo-container {
+    padding: 0 var(--spacing-08);
+    display: flex;
+    justify-content: space-evenly;
+  }
+
+  .try-premium-third-party-logo {
+    width: 36px;
+    height: 36px;
+  }
+
+  .try-premium-page-list-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: var(--spacing-06);
+  }
+
+  .try-premium-page-list {
+    padding-inline-start: 0;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    @include media-breakpoint-up(sm) {
+      flex-direction: row;
+      justify-content: space-between;
+      width: 100%;
+      max-width: 500px;
+    }
+
+    ul {
+      margin-bottom: 0;
+      width: 300px;
+
+      @include media-breakpoint-up(sm) {
+        width: unset;
+      }
+    }
+  }
+}