[PM-5367] Update the content of the enterprise vault page (#7291)

* Update the content of the enterprise vault page

* Update other enterprise layouts

* Apply feedback for best practices

apps/web/src/app/auth/trial-initiation/content/enterprise-content.component.html

@@ -1,17 +1,34 @@
-<h1 class="tw-text-4xl !tw-text-alt2">The Bitwarden Password Manager</h1>
+<h1 class="tw-text-3xl !tw-text-alt2">The Password Manager Trusted by Millions</h1>
 <div class="tw-pt-32">
-  <h2 class="tw-text-2xl">
-    Trusted by millions of individuals, teams, and organizations worldwide for secure password
-    storage and sharing.
-  </h2>
+  <h2 class="tw-text-2xl">Everything enterprises need out of a password manager:</h2>
 </div>
-<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
-  <li>Store logins, secure notes, and more</li>
-  <li>Collaborate and share securely</li>
-  <li>Access anywhere on any device</li>
-  <li>Create your account to get started</li>
+<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main tw-list-none tw-pl-0">
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Secure password sharing</li>
+  <li>
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Easy, flexible SSO and SCIM integrations
+  </li>
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Free families plan for users</li>
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Quick import and migration tools</li>
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Simple, streamlined user experience</li>
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Priority support and trainers</li>
 </ul>
 <div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
-  <app-logo-forbes></app-logo-forbes>
-  <app-logo-us-news></app-logo-us-news>
+  <app-logo-cnet-5-stars></app-logo-cnet-5-stars>
+  <div class="tw-flex tw-items-end tw-gap-8">
+    <review-logo
+      logoClass="tw-w-8"
+      logoSrc="../../images/register-layout/g2-logo.svg"
+      logoAlt="G2 Logo"
+    ></review-logo>
+    <review-logo
+      logoClass="tw-w-28"
+      logoSrc="../../images/register-layout/capterra-logo.svg"
+      logoAlt="Capterra Logo"
+    ></review-logo>
+    <review-logo
+      logoClass="tw-w-28"
+      logoSrc="../../images/register-layout/get-app-logo.svg"
+      logoAlt="Get App Logo"
+    ></review-logo>
+  </div>
 </div>

apps/web/src/app/auth/trial-initiation/content/enterprise1-content.component.html

@@ -1,17 +1,34 @@
-<h1 class="tw-text-4xl !tw-text-alt2">The Bitwarden Password Manager</h1>
+<h1 class="tw-text-3xl !tw-text-alt2">The Password Manager Trusted by Millions</h1>
 <div class="tw-pt-32">
-  <h2 class="tw-text-2xl">
-    Trusted by millions of individuals, teams, and organizations worldwide for secure password
-    storage and sharing.
-  </h2>
+  <h2 class="tw-text-2xl">Everything enterprises need out of a password manager:</h2>
 </div>
-<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
-  <li>Store logins, secure notes, and more</li>
-  <li>Collaborate and share securely</li>
-  <li>Access anywhere on any device</li>
-  <li>Create your account to get started</li>
+<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main tw-list-none tw-pl-0">
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Secure password sharing</li>
+  <li>
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Easy, flexible SSO and SCIM integrations
+  </li>
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Free families plan for users</li>
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Quick import and migration tools</li>
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Simple, streamlined user experience</li>
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Priority support and trainers</li>
 </ul>
 <div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
-  <app-logo-forbes></app-logo-forbes>
-  <app-logo-us-news></app-logo-us-news>
+  <app-logo-cnet-5-stars></app-logo-cnet-5-stars>
+  <div class="tw-flex tw-items-end tw-gap-8">
+    <review-logo
+      logoClass="tw-w-8"
+      logoSrc="../../images/register-layout/g2-logo.svg"
+      logoAlt="G2 Logo"
+    ></review-logo>
+    <review-logo
+      logoClass="tw-w-28"
+      logoSrc="../../images/register-layout/capterra-logo.svg"
+      logoAlt="Capterra Logo"
+    ></review-logo>
+    <review-logo
+      logoClass="tw-w-28"
+      logoSrc="../../images/register-layout/get-app-logo.svg"
+      logoAlt="Get App Logo"
+    ></review-logo>
+  </div>
 </div>

apps/web/src/app/auth/trial-initiation/content/enterprise2-content.component.html

@@ -1,17 +1,34 @@
-<h1 class="tw-text-4xl !tw-text-alt2">Start Your Enterprise Free Trial Now</h1>
+<h1 class="tw-text-3xl !tw-text-alt2">The Password Manager Trusted by Millions</h1>
 <div class="tw-pt-32">
-  <h2 class="tw-text-2xl">
-    Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure password
-    storage and sharing.
-  </h2>
+  <h2 class="tw-text-2xl">Everything enterprises need out of a password manager:</h2>
 </div>
-<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
-  <li>Collaborate and share securely</li>
-  <li>Deploy and manage quickly and easily</li>
-  <li>Access anywhere on any device</li>
-  <li>Create your account to get started</li>
+<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main tw-list-none tw-pl-0">
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Secure password sharing</li>
+  <li>
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Easy, flexible SSO and SCIM integrations
+  </li>
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Free families plan for users</li>
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Quick import and migration tools</li>
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Simple, streamlined user experience</li>
+  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Priority support and trainers</li>
 </ul>
 <div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
-  <app-logo-forbes></app-logo-forbes>
-  <app-logo-us-news></app-logo-us-news>
+  <app-logo-cnet-5-stars></app-logo-cnet-5-stars>
+  <div class="tw-flex tw-items-end tw-gap-8">
+    <review-logo
+      logoClass="tw-w-8"
+      logoSrc="../../images/register-layout/g2-logo.svg"
+      logoAlt="G2 Logo"
+    ></review-logo>
+    <review-logo
+      logoClass="tw-w-28"
+      logoSrc="../../images/register-layout/capterra-logo.svg"
+      logoAlt="Capterra Logo"
+    ></review-logo>
+    <review-logo
+      logoClass="tw-w-28"
+      logoSrc="../../images/register-layout/get-app-logo.svg"
+      logoAlt="Get App Logo"
+    ></review-logo>
+  </div>
 </div>

apps/web/src/app/auth/trial-initiation/content/logo-cnet-5-stars.component.html

@@ -0,0 +1,23 @@
+<figure>
+  <div class="tw-flex tw-justify-center tw-gap-4 tw-text-[#eab308] tw-text-5xl">
+    <i class="bwi bwi-star-f"></i>
+    <i class="bwi bwi-star-f"></i>
+    <i class="bwi bwi-star-f"></i>
+    <i class="bwi bwi-star-f"></i>
+    <i class="bwi bwi-star-f"></i>
+  </div>
+  <blockquote class="tw-mx-auto tw-my-2 tw-max-w-xl tw-px-4 tw-text-center">
+    “Bitwarden scores points for being fully open-source, secure and audited annually by third-party
+    cybersecurity firms, giving it a level of transparency that sets it apart from its peers.”
+  </blockquote>
+  <figcaption>
+    <cite>
+      <img
+        src="../../images/register-layout/cnet-logo.svg"
+        class="tw-mx-auto tw-block tw-w-40"
+        alt="CNET Logo"
+      />
+    </cite>
+    <p class="tw-text-center tw-font-bold -tw-translate-y-4">Best Password Manager in 2023</p>
+  </figcaption>
+</figure>

apps/web/src/app/auth/trial-initiation/content/logo-cnet-5-stars.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-logo-cnet-5-stars",
+  templateUrl: "logo-cnet-5-stars.component.html",
+})
+export class LogoCnet5StarsComponent {}

apps/web/src/app/auth/trial-initiation/content/review-logo.component.html

@@ -0,0 +1,18 @@
+<div class="tw-flex tw-flex-col tw-items-center tw-justify-center">
+  <img class="tw-mb-2" [ngClass]="logoClass" [src]="logoSrc" [alt]="logoAlt" />
+  <div class="tw-flex tw-items-center">
+    <div class="tw-flex tw-items-center tw-justify-center tw-text-[#eab308] tw-text-2xl">
+      <i class="bwi bwi-star-f"></i>
+      <i class="bwi bwi-star-f"></i>
+      <i class="bwi bwi-star-f"></i>
+      <i class="bwi bwi-star-f"></i>
+      <div class="tw-relative">
+        <div class="tw-absolute tw-inset-0 tw-w-3 tw-overflow-hidden">
+          <i class="bwi bwi-star-f"></i>
+        </div>
+        <i class="bwi bwi-star-f tw-text-[#cbd5e1]"></i>
+      </div>
+    </div>
+    <span class="tw-ml-2">4.7</span>
+  </div>
+</div>

apps/web/src/app/auth/trial-initiation/content/review-logo.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "review-logo",
+  templateUrl: "review-logo.component.html",
+})
+export class ReviewLogoComponent {
+  @Input() logoClass: string;
+  @Input() logoSrc: string;
+  @Input() logoAlt: string;
+}

apps/web/src/app/auth/trial-initiation/trial-initiation.module.ts

@@ -21,9 +21,11 @@ import { DefaultContentComponent } from "./content/default-content.component";
 import { EnterpriseContentComponent } from "./content/enterprise-content.component";
 import { Enterprise1ContentComponent } from "./content/enterprise1-content.component";
 import { Enterprise2ContentComponent } from "./content/enterprise2-content.component";
+import { LogoCnet5StarsComponent } from "./content/logo-cnet-5-stars.component";
 import { LogoCnetComponent } from "./content/logo-cnet.component";
 import { LogoForbesComponent } from "./content/logo-forbes.component";
 import { LogoUSNewsComponent } from "./content/logo-us-news.component";
+import { ReviewLogoComponent } from "./content/review-logo.component";
 import { TeamsContentComponent } from "./content/teams-content.component";
 import { Teams1ContentComponent } from "./content/teams1-content.component";
 import { Teams2ContentComponent } from "./content/teams2-content.component";
@@ -62,9 +64,11 @@ import { VerticalStepperModule } from "./vertical-stepper/vertical-stepper.modul
     CnetTeamsContentComponent,
     AbmEnterpriseContentComponent,
     AbmTeamsContentComponent,
+    LogoCnet5StarsComponent,
     LogoCnetComponent,
     LogoForbesComponent,
     LogoUSNewsComponent,
+    ReviewLogoComponent,
   ],
   exports: [TrialInitiationComponent],
   providers: [TitleCasePipe],