fix(landing): fix mobile styles, anchor links

Author: AmitMY

package.json

@@ -100,6 +100,7 @@
     "pose-viewer": "0.10.0",
     "rxjs": "7.8.1",
     "stats.js": "0.17.0",
+    "swiper": "^11.1.14",
     "three": "0.169.0",
     "tslib": "2.7.0",
     "web-vitals": "4.2.3",

src/app/pages/landing/about/about-customers/about-customers.component.scss

@@ -50,5 +50,10 @@ ion-item {
     background: rgb(from var(--ion-card-background, #fff) r g b / 0.8);
     backdrop-filter: blur(10.2px);
     border: 1px solid rgba(255, 255, 255, 0.3);
+
+    @media #{$breakpoint-lt-sm} {
+      max-width: none;
+      margin-top: revert-layer;
+    }
   }
 }

src/app/pages/landing/about/about-hero/about-hero.component.html

@@ -13,7 +13,7 @@ <h1>
       Try it out
       <ion-icon slot="end" name="arrow-forward"></ion-icon>
     </ion-button>
-    <ion-button routerLink="/about#competition" shape="round" color="light">Discover Competition</ion-button>
+    <ion-button routerLink="/about" fragment="competition" shape="round" color="light">Discover Competition</ion-button>
   </div>
   <img src="assets/promotional/about/hero.webp" [alt]="'landing.about.hero.img' | transloco" />
 </div>

src/app/pages/landing/about/about-team/about-team.component.scss

@@ -1,3 +1,5 @@
+@import '../../../../../theme/variables';
+
 .container {
   text-align: center;
 }
@@ -11,6 +13,10 @@ ion-card {
   max-width: 280px;
   text-align: center;
   border-radius: 16px;
+  @media #{$breakpoint-lt-md} {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 ion-avatar {

src/app/pages/landing/about/about-team/about-team.component.ts

@@ -11,7 +11,7 @@ export class AboutTeamComponent {
       name: 'Timothy Rabozzi',
       avatar: 'assets/promotional/about/team/timothy-rabozzi.jpg',
       title: 'CEO',
-      bio: 'CEO with a background in LegalTech, campaigning, and business analysis. Holds a Master of Law with a focus on public law and innovation from the University of Bern.',
+      bio: 'Background in LegalTech, campaigning, and business analysis. Holds a Master of Law with a focus on public law and innovation from the University of Bern.',
     },
     {
       name: 'Amit Moryossef',

src/app/pages/landing/about/about.component.scss

@@ -3,6 +3,7 @@
 :host > * {
   display: block;
   padding: 50px;
+  padding-top: 0;
 
   @media #{$breakpoint-lt-md} {
     padding: 50px 25px;

src/app/pages/landing/landing.module.ts

@@ -1,4 +1,4 @@
-import {NgModule} from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {LandingComponent} from './landing.component';
 import {AboutComponent} from './about/about.component';
@@ -30,6 +30,10 @@ import {PrivacyComponent} from './privacy/privacy.component';
 import {MermaidChartComponent} from './mermaid-chart/mermaid-chart.component';
 import {LandingFooterComponent} from './landing-footer/landing-footer.component';
 import {ReactiveFormsModule} from '@angular/forms';
+import {register} from 'swiper/element/bundle';
+import {SignedToSpokenModule} from '../translate/signed-to-spoken/signed-to-spoken.module';
+
+register();
 
 @NgModule({
   declarations: [
@@ -66,8 +70,10 @@ import {ReactiveFormsModule} from '@angular/forms';
     IonicModule,
     MermaidChartComponent,
     ReactiveFormsModule,
+    SignedToSpokenModule,
   ],
   bootstrap: [LandingComponent],
   exports: [I18NLanguageSelectorComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class LandingModule {}