[CL-841] landing layout component (#17969)

* wip

* wip

* implement new control flow syntax

* new landing helper components

* add missing imports to header

* create max width container

* create landing card component

* address claude feedback

* fix center aligned text

* ensure secondary content is centered for now

* only render container when there is content

* remove max width container

* remove constructor init of variable

* remove unnecessary styling

* build styling into helper components

* ensure content grows

* ensure content takes allowed width

* apply padding to elements instead of header and check for projected content

* use Array.from to filter nodes

* fix logo width

* use has selector to apply actions styles, simplify heading padding

* remove unneeded content projection

* remove unneeded comment

* use modern control flow for story

* update max width classes to signal and remove switch

* make logo input readonly

* remove variables

* remove object type

* fix width types usage

* add comments about component usage

* fix broken variable reference

* fix broken max width class usage

* only appyly y padding to header actions

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

@@ -1,76 +1,26 @@
-<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',
-  }"
->
-  <div
-    [class]="
-      'tw-flex tw-justify-between tw-items-center tw-w-full' + (!hideLogo() ? ' tw-mb-12' : '')
-    "
-  >
-    @if (!hideLogo()) {
-      <a
-        [routerLink]="['/']"
-        class="tw-w-32 sm:tw-w-[200px] tw-self-center sm:tw-self-start tw-block [&>*]:tw-align-top"
-      >
-        <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
-      </a>
-    }
-    <div class="tw-ms-auto">
-      <ng-content select="[slot=header-actions]"></ng-content>
-    </div>
-  </div>
+<bit-landing-layout [hideBackgroundIllustration]="hideBackgroundIllustration()">
+  <bit-landing-header [hideLogo]="hideLogo()">
+    <ng-content select="[slot=header-actions]"></ng-content>
+  </bit-landing-header>
 
-  <div class="tw-text-center tw-mb-4 sm:tw-mb-6 tw-mx-auto" [ngClass]="maxWidthClass">
-    @let iconInput = icon();
-
-    <!-- In some scenarios this icon's size is not limited by container width correctly -->
-    <!-- Targeting the SVG here to try and ensure it never grows too large in even the media queries are not working as expected -->
-    <div
-      *ngIf="iconInput !== null"
-      class="tw-size-20 sm:tw-size-24 [&_svg]:tw-w-full [&_svg]:tw-max-w-24 tw-mx-auto tw-content-center"
-    >
-      <bit-icon [icon]="iconInput"></bit-icon>
-    </div>
-
-    @if (title()) {
-      <!-- Small screens -->
-      <h1 bitTypography="h2" class="tw-mt-2 sm:tw-hidden">
-        {{ title() }}
-      </h1>
-      <!-- Medium to Larger screens -->
-      <h1 bitTypography="h1" class="tw-mt-2 tw-hidden sm:tw-block">
-        {{ title() }}
-      </h1>
-    }
-
-    @if (subtitle()) {
-      <div class="tw-text-sm sm:tw-text-base">{{ subtitle() }}</div>
-    }
-  </div>
-
-  <div
-    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"
-  >
+  <bit-landing-content [maxWidth]="maxWidth()">
+    <bit-landing-hero [icon]="icon()" [title]="title()" [subtitle]="subtitle()"></bit-landing-hero>
     @if (hideCardWrapper()) {
       <div class="tw-mb-6 sm:tw-mb-10">
         <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
       </div>
     } @else {
-      <bit-base-card
-        class="!tw-rounded-2xl tw-mb-6 sm:tw-mb-10 tw-mx-auto tw-w-full tw-bg-transparent tw-border-none tw-shadow-none sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-100 sm:tw-shadow sm:tw-p-8"
-      >
+      <bit-landing-card>
         <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
-      </bit-base-card>
+      </bit-landing-card>
     }
-    <ng-content select="[slot=secondary]"></ng-content>
-  </div>
+    <div class="tw-flex tw-flex-col tw-items-center">
+      <ng-content select="[slot=secondary]"></ng-content>
+    </div>
+  </bit-landing-content>
 
   @if (!hideFooter()) {
-    <footer class="tw-text-center tw-mt-4 sm:tw-mt-6">
+    <bit-landing-footer>
       @if (showReadonlyHostname()) {
         <div bitTypography="body2">{{ "accessing" | i18n }} {{ hostname }}</div>
       } @else {
@@ -81,22 +31,9 @@
         <div bitTypography="body2">&copy; {{ year }} Bitwarden Inc.</div>
         <div bitTypography="body2">{{ version }}</div>
       }
-    </footer>
+    </bit-landing-footer>
   }
-
-  @if (!hideBackgroundIllustration()) {
-    <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>
+</bit-landing-layout>
 
 <ng-template #defaultContent>
   <ng-content></ng-content>