Merge pull request #18783 from overleaf/mf-new-plans-page-individual-desktop-header

[web] Create new plans page table header (individual table with static data)

GitOrigin-RevId: fd831d1546eb561ab150007c72bd3c1ca8afd6db

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

@@ -205,6 +205,11 @@
     align-items: center;
   }
 
+  .plans-new-tab-content {
+    width: 100%;
+    border: none;
+  }
+
   .plans-new-mobile {
     display: none;
 
@@ -220,4 +225,96 @@
       display: none;
     }
   }
+
+  .plans-new-table {
+    width: 100%;
+
+    // overrides
+    th {
+      font-weight: normal;
+    }
+  }
+
+  .plans-new-table-4-column {
+    th,
+    td {
+      width: 25%;
+    }
+  }
+
+  .plans-new-table-individual {
+    thead th {
+      height: 235px;
+    }
+  }
+
+  .plans-new-table-header {
+    padding: @spacing-06 @spacing-08;
+
+    @media (max-width: @screen-md-max) {
+      padding: @spacing-05;
+    }
+  }
+
+  .plans-new-table-header-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+
+    .plans-new-table-header-title {
+      font-size: 1.25rem; // 20px
+      font-weight: 600;
+      line-height: 1.4;
+      margin-bottom: @spacing-04;
+      color: var(--neutral-90);
+      text-align: center;
+    }
+
+    .plans-new-table-header-nondiscounted-price {
+      position: absolute;
+      top: 50px;
+      left: 25px;
+      font-size: 1.125rem; // 18px
+      line-height: 1.778;
+      color: var(--neutral-40);
+      font-weight: 600;
+
+      @media (max-width: @screen-md-max) {
+        left: 0;
+      }
+
+      @media (max-width: @screen-sm-max) {
+        left: -22px;
+      }
+    }
+
+    .plans-new-table-header-price-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .plans-new-table-header-price {
+      font-size: 2.25rem; // 36px`
+      font-weight: 600;
+      line-height: 1.333;
+      color: var(--neutral-90);
+    }
+
+    .plans-new-table-header-price-unit {
+      font-size: 0.875rem; // 14px
+      line-height: 1.428;
+    }
+
+    .plans-new-table-header-desc {
+      margin-top: @spacing-05;
+      font-size: 0.875rem; // 14px
+      line-height: 1.428;
+    }
+
+    .plans-new-table-button {
+      margin-top: auto;
+    }
+  }
 }

services/web/locales/en.json

@@ -101,6 +101,7 @@
   "all_projects": "All Projects",
   "all_projects_will_be_transferred_immediately": "All projects will be transferred to the new owner immediately.",
   "all_templates": "All Templates",
+  "all_the_pros_of_our_standard_plan_plus_unlimited_collab": "All the pros of our standard plan, plus unlimited collaborators per project.",
   "already_have_an_account": "Already have an account?",
   "already_have_sl_account": "Already have an __appName__ account?",
   "already_subscribed_try_refreshing_the_page": "Already subscribed? Try refreshing the page.",
@@ -255,6 +256,7 @@
   "code_check_failed": "Code check failed",
   "code_check_failed_explanation": "Your code has errors that need to be fixed before the auto-compile can run",
   "code_editor": "Code Editor",
+  "collaborate_easily_on_your_projects": "Collaborate easily on your projects. Work on longer or more complex docs.",
   "collaborate_online_and_offline": "Collaborate online and offline, using your own workflow",
   "collaboration": "Collaboration",
   "collaborator": "Collaborator",
@@ -629,6 +631,7 @@
   "for_students_only": "For students only",
   "for_teaching": "For teaching",
   "for_universities": "For universities",
+  "forever": "forever",
   "forgot_password": "Forgot password?",
   "forgot_your_password": "Forgot your password",
   "format": "Format",
@@ -736,6 +739,7 @@
   "go_to_overleaf": "Go to Overleaf",
   "go_to_pdf_location_in_code": "Go to PDF location in code (Tip: double click on the PDF for best results)",
   "go_to_settings": "Go to settings",
+  "great_for_getting_started": "Great for getting started",
   "group_admin": "Group admin",
   "group_admins_get_access_to": "Group admins get access to",
   "group_admins_get_access_to_info": "Special features available only on group plans.",