Merge pull request #557 from bitwarden/feature/enterprise-landing-page

Layout images and styling for register page

src/app/accounts/register.component.html

@@ -1,15 +1,34 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+<div class="layout" [ngClass]="['layout', layout]">
+    <header class="header" *ngIf="layout === 'enterprise2'">
+        <div class="container">
+            <div class="row">
+                <div class="col-7">
+                    <img alt="Bitwarden" class="logo mb-2" src="../../images/register-layout/logo-horizontal-white.png">
+                </div>
+            </div>
+        </div>
+    </header>
+    <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
         <div class="row">
             <div class="col-7" *ngIf="layout">
                 <div class="mt-5">
                     <div *ngIf="layout === 'enterprise2'">
-                    <p>Companies globally trust Bitwarden for password management.</p>
+                        <h2>Companies globally trust Bitwarden for password management.</h2>
                         <p>Start your 7-day free trial!</p>
-                    <p>Quickly deploy your <b>organization</b></p>
+                        <p class="highlight">Quickly deploy your <b>organization</b></p>
                         <p>Use Bitwarden across all platforms</p>
                         <p>Collaborate and share securely</p>
-                    <p>"Bitwarden has become a popular choice among open-source software advocates. After using it for a
-                        few months, I can see why." - February 2020</p>
+                        <figure>
+                            <figcaption>
+                                <cite>
+                                    <img src="../../images/register-layout/wired-logo.png" alt="Wired">
+                                </cite>
+                            </figcaption>
+                            <blockquote>
+                                "Bitwarden has become a popular choice among open-source software advocates. After using it for a
+                                few months, I can see why." - February 2020
+                            </blockquote>
+                        </figure>
                     </div>
                     <div *ngIf="layout === 'enterprise3'">
                         <p>Enterprise 3 layout</p>
@@ -126,4 +145,5 @@
                 </div>
             </div>
         </div>
-</form>
+    </form>
+</div>

src/scss/register-layout.scss

@@ -0,0 +1,63 @@
+.layout {
+    &.enterprise2 {
+
+        header {
+            color: $secondary;
+            background-color: $primary;
+
+            &:before {
+                content: "";
+                position: absolute;
+                z-index: -1;
+                width: 100%;
+                height: 340px;
+                left: 0;
+                transform: skewY(-3deg);
+                background: $primary;
+            }
+
+            img.logo {
+                
+                margin: 12px 0 0;
+                width: 284px;
+                max-width: 284px;
+                height: auto;
+            }
+        }
+
+        h2 {
+            color: #ffffff;
+            font-size: 1.8rem;
+            margin: 100px 0 150px 0;
+        }
+
+        p {
+            margin: 20px 0 40px 0;
+            font-size: 1.4rem;
+
+            &:before {
+                content: "/";
+                padding-right: 12px;
+            }
+            &:not(.highlight) {
+                &:before {
+                    color: $primary-accent;
+                }
+            }
+
+            b {
+                &:after {
+                    content: "⟶";
+                    font-size: 2rem;
+                    padding-left: 6px;
+                }
+            }
+        }
+
+        blockquote {
+            margin: 20px 0 0 0;
+            font-size: 1.4rem;
+            padding-right: 40px;
+        }
+    }
+}

src/scss/styles.scss

@@ -839,3 +839,5 @@ img.logo {
 .cursor-move {
     cursor: move !important;
 }
+
+@import "./register-layout";