premium callout

src/app/settings/premium.component.html

@@ -1,5 +1,31 @@
+<app-callout type="success" icon="fa-star" title="{{'goPremium' | i18n}}">
+    <p>{{'premiumSignUpAndGet' | i18n}}</p>
+    <ul class="fa-ul">
+        <li>
+            <i class="fa fa-check text-success fa-li"></i>
+            {{'premiumSignUpStorage' | i18n}}
+        </li>
+        <li>
+            <i class="fa fa-check text-success fa-li"></i>
+            {{'premiumSignUpTwoStep' | i18n}}
+        </li>
+        <li>
+            <i class="fa fa-check text-success fa-li"></i>
+            {{'premiumSignUpTotp' | i18n}}
+        </li>
+        <li>
+            <i class="fa fa-check text-success fa-li"></i>
+            {{'premiumSignUpSupport' | i18n}}
+        </li>
+        <li>
+            <i class="fa fa-check text-success fa-li"></i>
+            {{'premiumSignUpFuture' | i18n}}
+        </li>
+    </ul>
+    <p class="text-lg mb-0">{{'premiumPrice' | i18n : (premiumPrice | currency:'USD':'$')}}</p>
+</app-callout>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-    <h2 class="spaced-header">{{'addons' | i18n}}</h2>
+    <h2 class="mt-5">{{'addons' | i18n}}</h2>
     <div class="form-group">
         <label for="additionalStorage">{{'additionalStorageGb' | i18n}}</label>
         <input id="additionalStorage" class="form-control" type="number" name="AdditionalStorageGb" [(ngModel)]="additionalStorage"

src/locales/en/messages.json

@@ -1198,6 +1198,37 @@
   "billingAndLicensing": {
     "message": "Billing & Licensing"
   },
+  "goPremium": {
+    "message": "Go Premium",
+    "description": "Another way of saying \"Get a premium membership\""
+  },
+  "premiumSignUpAndGet": {
+    "message": "Sign up for a premium membership and get:"
+  },
+  "premiumSignUpStorage": {
+    "message": "1 GB of encrypted file storage."
+  },
+  "premiumSignUpTwoStep": {
+    "message": "Additional two-step login options such as YubiKey, FIDO U2F, and Duo."
+  },
+  "premiumSignUpTotp": {
+    "message": "TOTP verification code (2FA) generator for logins in your vault."
+  },
+  "premiumSignUpSupport": {
+    "message": "Priority customer support."
+  },
+  "premiumSignUpFuture": {
+    "message": "All future premium features. More coming soon!"
+  },
+  "premiumPrice": {
+    "message": "All for just $PRICE$ /year!",
+    "placeholders": {
+      "price": {
+        "content": "$1",
+        "example": "$10"
+      }
+    }
+  },
   "addons": {
     "message": "Addons"
   },