[CL-805] [CL-521] anon layout illustrations (#16002)

* Add illustrations to anon layout

* update ids and fill classes

* Add illustrations to 404 page

* update svg sizes

* update logo size and placement to match loaded state

* update anon layout logo size to match loading screens

* update 404 logo size and spacing

* update svgIcon imports

* remove 404 footer

* absolutely position svg to fix random positioning issues

* update logo placement

* add padding to battom of logo container

* add back tw-link class

* update anon layout padding

libs/components/src/anon-layout/anon-layout.component.html

@@ -1,5 +1,5 @@
 <main
-  class="tw-flex tw-w-full tw-mx-auto tw-flex-col tw-bg-background-alt tw-px-6 tw-py-4 tw-text-main"
+  class="tw-relative tw-flex tw-w-full tw-mx-auto tw-flex-col tw-bg-background-alt tw-p-5 tw-text-main"
   [ngClass]="{
     'tw-min-h-screen': clientType === 'web',
     'tw-min-h-full': clientType === 'browser' || clientType === 'desktop',
@@ -8,7 +8,7 @@
   <a
     *ngIf="!hideLogo()"
     [routerLink]="['/']"
-    class="tw-w-[128px] tw-block tw-mb-12 [&>*]:tw-align-top"
+    class="tw-w-[200px] tw-block tw-mb-12 [&>*]:tw-align-top"
   >
     <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
   </a>
@@ -20,11 +20,11 @@
 
     <ng-container *ngIf="title()">
       <!-- Small screens -->
-      <h1 bitTypography="h3" class="tw-mt-2 sm:tw-hidden">
+      <h1 bitTypography="h2" class="tw-mt-2 sm:tw-hidden">
         {{ title() }}
       </h1>
       <!-- Medium to Larger screens -->
-      <h1 bitTypography="h2" class="tw-mt-2 tw-hidden sm:tw-block">
+      <h1 bitTypography="h1" class="tw-mt-2 tw-hidden sm:tw-block">
         {{ title() }}
       </h1>
     </ng-container>
@@ -33,7 +33,7 @@
   </div>
 
   <div
-    class="tw-grow tw-w-full tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
+    class="tw-z-10 tw-grow tw-w-full tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
     [ngClass]="maxWidthClass"
   >
     @if (hideCardWrapper()) {
@@ -62,6 +62,17 @@
       <div bitTypography="body2">{{ version }}</div>
     </ng-container>
   </footer>
+
+  <div
+    class="tw-hidden md:tw-block [&_svg]:tw-absolute tw-z-[1] tw-opacity-[.11] [&_svg]:tw-bottom-0 [&_svg]:tw-start-0 [&_svg]:tw-w-[35%] [&_svg]:tw-max-w-[450px]"
+  >
+    <bit-icon [icon]="leftIllustration"></bit-icon>
+  </div>
+  <div
+    class="tw-hidden md:tw-block [&_svg]:tw-absolute tw-z-[1] tw-opacity-[.11] [&_svg]:tw-bottom-0 [&_svg]:tw-end-0 [&_svg]:tw-w-[35%] [&_svg]:tw-max-w-[450px]"
+  >
+    <bit-icon [icon]="rightIllustration"></bit-icon>
+  </div>
 </main>
 
 <ng-template #defaultContent>

libs/components/src/anon-layout/anon-layout.component.ts

@@ -21,6 +21,8 @@ import { AnonLayoutBitwardenShield } from "../icon/logos";
 import { SharedModule } from "../shared";
 import { TypographyModule } from "../typography";
 
+import { LeftIllustration, RightIllustration } from "./illustrations";
+
 export type AnonLayoutMaxWidth = "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
 
 @Component({
@@ -35,6 +37,9 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
     return ["tw-h-full"];
   }
 
+  readonly leftIllustration = LeftIllustration;
+  readonly rightIllustration = RightIllustration;
+
   readonly title = input<string>();
   readonly subtitle = input<string>();
   readonly icon = model<Icon>();

libs/components/src/anon-layout/illustrations/index.ts

@@ -0,0 +1,2 @@
+export * from "./left-illustration";
+export * from "./right-illustration";

libs/components/src/navigation/nav-logo.component.html

@@ -1,9 +1,9 @@
 <div
   [ngClass]="{
-    'tw-sticky tw-top-0 tw-z-50 tw-pb-2': sideNavService.open,
+    'tw-sticky tw-top-0 tw-z-50 tw-pb-4': sideNavService.open,
     'tw-pb-[calc(theme(spacing.6)_+_2px)]': !sideNavService.open,
   }"
-  class="tw-px-2 tw-pt-5"
+  class="tw-px-2 tw-pt-2"
 >
   <!-- absolutely position the link svg to avoid shifting layout when sidenav is closed -->
   <a