feat(REB-289): Add Rylo redirect overlay on translate app

src/app/app.component.html

@@ -1,3 +1,4 @@
 <ion-app>
   <ion-router-outlet />
+  <app-rylo-redirect-overlay />
 </ion-app>

src/app/app.component.ts

@@ -8,6 +8,7 @@ import {Capacitor} from '@capacitor/core';
 import {languageCodeNormalizer} from './core/modules/transloco/languages';
 import {Meta} from '@angular/platform-browser';
 import {IonApp, IonRouterOutlet} from '@ionic/angular/standalone';
+import {RyloRedirectOverlayComponent} from './components/rylo-redirect-overlay/rylo-redirect-overlay.component';
 import {getUrlParams} from './core/helpers/url';
 import * as CookieConsent from 'vanilla-cookieconsent';
 import {ConsentStatus, ConsentType, FirebaseAnalytics} from '@capacitor-firebase/analytics';
@@ -17,7 +18,7 @@ import {MediaMatcher} from '@angular/cdk/layout';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  imports: [IonApp, IonRouterOutlet],
+  imports: [IonApp, IonRouterOutlet, RyloRedirectOverlayComponent],
 })
 export class AppComponent implements AfterViewInit {
   private meta = inject(Meta);

src/app/components/announcement-banner/announcement-banner.component.html

@@ -1,8 +1,8 @@
 <ion-toolbar color="tertiary">
   <ion-title>
     <div class="announcement-content">
-      sign.mt has been acquired by Nagish!
-      <ion-button shape="round" href="https://nagish.com/post/nagish-acquires-sign-mt" target="_blank" rel="noopener">
+      sign.mt has been acquired by Rylo!
+      <ion-button shape="round" href="https://rylo.com" target="_blank" rel="noopener">
         Check out the announcement
       </ion-button>
     </div>

src/app/components/logo/logo.component.html

@@ -8,8 +8,8 @@
   }
 </a>
 by
-<a href="https://nagish.com">
-  <picture class="nagish-logo">
-    <img src="../../../assets/brand/nagish.svg" alt="Nagish" />
+<a href="https://rylo.com">
+  <picture class="rylo-logo">
+    <img src="../../../assets/brand/rylo.svg" alt="Rylo" />
   </picture>
 </a>

src/app/components/logo/logo.component.scss

@@ -17,7 +17,7 @@ img {
   display: block;
 }
 
-.nagish-logo {
+.rylo-logo {
   img {
     height: 1em;
   }

src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.html

@@ -0,0 +1,11 @@
+@if (visible) {
+  <div class="rylo-overlay">
+    <div class="rylo-overlay__card" role="dialog" aria-modal="true" aria-labelledby="rylo-overlay-title">
+      <div class="rylo-overlay__text">
+        <h1 id="rylo-overlay-title" class="rylo-overlay__title">sign.Translate is now Sign Translate by Rylo.</h1>
+        <p class="rylo-overlay__subtitle">We have our new name and looks but your experience stays the same.</p>
+      </div>
+      <a class="rylo-overlay__cta" [href]="redirectUrl" (click)="redirect($event)" autofocus>Try Sign Translate</a>
+    </div>
+  </div>
+}

src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.scss

@@ -0,0 +1,91 @@
+@forward '../../../theme/fonts/poppins.css';
+
+:host {
+  display: contents;
+}
+
+.rylo-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background-color: rgba(25, 20, 18, 0.6);
+  backdrop-filter: blur(2px);
+}
+
+.rylo-overlay__card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  width: 100%;
+  max-width: 760px;
+  padding: 72px 48px;
+  overflow: hidden;
+  text-align: center;
+  border-radius: 28px;
+  background-color: #5d7c93;
+  background-image: linear-gradient(rgba(93, 124, 147, 0.4), rgba(93, 124, 147, 0.4)), url('/assets/rylo-clouds.webp');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  box-shadow: 0 24px 60px rgba(25, 20, 18, 0.4);
+}
+
+.rylo-overlay__text {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.rylo-overlay__title {
+  margin: 0;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  font-size: clamp(28px, 5vw, 44px);
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: #faf5f2;
+}
+
+.rylo-overlay__subtitle {
+  margin: 0;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 400;
+  font-size: clamp(16px, 2.2vw, 19px);
+  line-height: 1.45;
+  color: rgba(250, 245, 242, 0.95);
+}
+
+.rylo-overlay__cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  padding: 8px 24px;
+  border-radius: 12px;
+  background-color: #f9923c;
+  color: #191412;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+  text-decoration: none;
+  box-shadow:
+    0 8px 12px rgba(25, 20, 18, 0.15),
+    inset 0 0 8px rgba(255, 255, 255, 0.4);
+  transition:
+    transform 0.15s ease,
+    filter 0.15s ease;
+}
+
+.rylo-overlay__cta:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.03);
+}
+
+.rylo-overlay__cta:active {
+  transform: translateY(0);
+}

src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.spec.ts

@@ -0,0 +1,29 @@
+import {TestBed} from '@angular/core/testing';
+import {Capacitor} from '@capacitor/core';
+import {RyloRedirectOverlayComponent} from './rylo-redirect-overlay.component';
+
+describe('RyloRedirectOverlayComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RyloRedirectOverlayComponent],
+    }).compileComponents();
+  });
+
+  it('renders the redirect overlay with a CTA to Rylo on web', () => {
+    spyOn(Capacitor, 'isNativePlatform').and.returnValue(false);
+    const fixture = TestBed.createComponent(RyloRedirectOverlayComponent);
+    fixture.detectChanges();
+
+    const cta = fixture.nativeElement.querySelector('.rylo-overlay__cta') as HTMLAnchorElement;
+    expect(cta).toBeTruthy();
+    expect(cta.getAttribute('href')).toBe('https://rylo.com/sign/translate');
+  });
+
+  it('renders nothing on native platforms', () => {
+    spyOn(Capacitor, 'isNativePlatform').and.returnValue(true);
+    const fixture = TestBed.createComponent(RyloRedirectOverlayComponent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.rylo-overlay')).toBeNull();
+  });
+});

src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.ts

@@ -0,0 +1,26 @@
+import {Component, inject} from '@angular/core';
+import {Capacitor} from '@capacitor/core';
+import {GoogleAnalyticsService} from '../../core/modules/google-analytics/google-analytics.service';
+
+@Component({
+  selector: 'app-rylo-redirect-overlay',
+  standalone: true,
+  templateUrl: './rylo-redirect-overlay.component.html',
+  styleUrl: './rylo-redirect-overlay.component.scss',
+})
+export class RyloRedirectOverlayComponent {
+  private ga = inject(GoogleAnalyticsService);
+
+  readonly visible = !Capacitor.isNativePlatform();
+  readonly redirectUrl = 'https://rylo.com/sign/translate';
+
+  async redirect(event: Event): Promise<void> {
+    event.preventDefault();
+    try {
+      await this.ga.logEvent('rylo_redirect_click');
+    } catch {
+      // Analytics must never block the redirect.
+    }
+    window.location.href = this.redirectUrl;
+  }
+}

src/app/core/modules/google-analytics/google-analytics.service.ts

@@ -30,6 +30,13 @@ export class GoogleAnalyticsService {
     await FirebaseAnalytics.setCurrentScreen({screenName});
   }
 
+  async logEvent(name: string, params?: Record<string, any>) {
+    if (!this.isSupported) {
+      return;
+    }
+    await FirebaseAnalytics.logEvent({name, params});
+  }
+
   logPerformanceMetrics() {
     if (!this.isSupported) {
       return;

src/theme/fonts/poppins.css

@@ -5,3 +5,11 @@
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
 }
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');
+}