Merge pull request #18652 from overleaf/mf-create-main-tab-new-plans-page

[web] Create new plans page tabs and period switcher

GitOrigin-RevId: 2dfea413fdcbbca8e90c1ab76844f35b2da4bd62

services/web/frontend/stylesheets/app/plans/plans-new-design.less

@@ -0,0 +1,125 @@
+.plans-new-design {
+  .plans-new-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .plans-new-tabs {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+
+    .plans-new-tab {
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: 600;
+      border-top-right-radius: 8px;
+      border-top-left-radius: 8px;
+
+      .plans-new-tab-link {
+        border: unset;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        color: var(--neutral-70);
+        margin: 0;
+        border-top-right-radius: 8px;
+        border-top-left-radius: 8px;
+        border: 1px solid var(--neutral-20);
+
+        &:focus {
+          background-color: unset;
+          border: 1px solid var(--emerald-green);
+          border-bottom-color: white;
+        }
+
+        &:hover {
+          background-color: var(--neutral-20);
+        }
+      }
+
+      &.active {
+        .plans-new-tab-link {
+          border: 1px solid var(--emerald-green);
+          color: var(--emerald-green);
+          border-bottom-color: white;
+
+          &:hover {
+            background-color: unset;
+          }
+        }
+
+        .plans-new-discount-badge {
+          background-color: #eaf6ef;
+          color: var(--emerald-green);
+        }
+      }
+    }
+  }
+
+  @switcher-container-width: 270px;
+  @switcher-container-height: 44px;
+  @switcher-container-border-radius: @switcher-container-height / 2;
+  @switcher-container-padding: 6px;
+  @switcher-padding-vertical: 2px;
+  @switcher-height: @switcher-container-height - 2 * @switcher-container-padding;
+  @switcher-border-radius: @switcher-height / 2;
+
+  .plans-new-period-switcher-container {
+    display: flex;
+    justify-content: center;
+    background-color: var(--neutral-10);
+    width: @switcher-container-width;
+    height: @switcher-container-height;
+    border-radius: @switcher-container-border-radius;
+    padding: @switcher-container-padding;
+    margin-top: 64px;
+    margin-bottom: 40px;
+
+    .plans-new-period-switcher {
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 1.4;
+      text-align: center;
+      padding: 2px 8px;
+      height: @switcher-height;
+      border-radius: @switcher-border-radius;
+      display: flex;
+      align-items: center;
+      border: unset;
+      background-color: unset;
+
+      &:hover {
+        background-color: var(--neutral-20);
+      }
+
+      &.active {
+        background-color: var(--emerald-green);
+        color: white;
+        box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
+
+        .plans-new-discount-badge {
+          background-color: #eaf6ef;
+          color: var(--emerald-green);
+        }
+      }
+
+      .plans-new-discount-badge {
+        margin-left: 6px;
+      }
+    }
+  }
+
+  .plans-new-discount-badge {
+    font-size: 12px;
+    font-family: 'DM Mono', monospace;
+    padding: 2px 8px;
+    height: 20px;
+    border-radius: 10px;
+    background-color: var(--neutral-70);
+    color: white;
+    display: flex;
+    align-items: center;
+  }
+}

services/web/frontend/stylesheets/main-style.less

@@ -105,6 +105,7 @@
 @import 'app/editor.less';
 @import 'app/homepage.less';
 @import 'app/plans/plans-v2.less';
+@import 'app/plans/plans-new-design.less';
 @import 'app/recurly.less';
 @import 'app/bonus.less';
 @import 'app/register.less';

services/web/locales/en.json

@@ -854,6 +854,7 @@
   "include_caption": "Include caption",
   "include_label": "Include label",
   "increased_compile_timeout": "Increased compile timeout",
+  "individuals": "Individuals",
   "indvidual_plans": "Individual Plans",
   "info": "Info",
   "inr_discount_modal_info": "Get document history, track changes, additional collaborators, and more at Purchasing Power Parity prices.",
@@ -1601,6 +1602,7 @@
   "saml_missing_signature_error": "Sorry, the information received from your identity provider is not signed (both response and assertion signatures are required).  Please contact your administrator for more information.",
   "saml_response": "SAML Response",
   "save": "Save",
+  "save_20_percent": "save 20%",
   "save_20_percent_by_paying_annually": "Save 20% by paying annually",
   "save_30_percent_or_more": "save 30% or more",
   "save_30_percent_or_more_uppercase": "Save 30% or more",
@@ -1815,6 +1817,7 @@
   "student_and_faculty_support_make_difference": "Student and faculty support make a difference! We can share this information with our contacts at your university when discussing an Overleaf institutional account.",
   "student_disclaimer": "The educational discount applies to all students at secondary and postsecondary institutions (schools and universities). We may contact you to confirm that you’re eligible for the discount.",
   "student_plans": "Student Plans",
+  "students": "Students",
   "subject": "Subject",
   "subject_area": "Subject area",
   "subject_to_additional_vat": "Prices may be subject to additional VAT, depending on your country.",
@@ -2196,6 +2199,7 @@
   "x_price_per_user": "__price__ per user",
   "x_price_per_year": "__price__ per year",
   "year": "year",
+  "yearly": "Yearly",
   "yes_im_in": "Yes, I’m in",
   "yes_move_me_to_personal_plan": "Yes, move me to the Personal plan",
   "yes_that_is_correct": "Yes, that’s correct",