diff --git a/src/app/app.component.html b/src/app/app.component.html index 7d73aa7b..38d1946f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,4 @@ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a65d6158..7afc1366 100644 --- a/src/app/app.component.ts +++ b/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); diff --git a/src/app/components/announcement-banner/announcement-banner.component.html b/src/app/components/announcement-banner/announcement-banner.component.html index d65f7f46..00a2d6ba 100644 --- a/src/app/components/announcement-banner/announcement-banner.component.html +++ b/src/app/components/announcement-banner/announcement-banner.component.html @@ -1,8 +1,8 @@
- sign.mt has been acquired by Nagish! - + sign.mt has been acquired by Rylo! + Check out the announcement
diff --git a/src/app/components/logo/logo.component.html b/src/app/components/logo/logo.component.html index 547e3aa9..47bfddf7 100644 --- a/src/app/components/logo/logo.component.html +++ b/src/app/components/logo/logo.component.html @@ -8,8 +8,8 @@ } by - - + diff --git a/src/app/components/logo/logo.component.scss b/src/app/components/logo/logo.component.scss index 97ed9e29..84c64c11 100644 --- a/src/app/components/logo/logo.component.scss +++ b/src/app/components/logo/logo.component.scss @@ -17,7 +17,7 @@ img { display: block; } -.nagish-logo { +.rylo-logo { img { height: 1em; } diff --git a/src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.html b/src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.html new file mode 100644 index 00000000..33d10603 --- /dev/null +++ b/src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.html @@ -0,0 +1,11 @@ +@if (visible) { +
+ +
+} diff --git a/src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.scss b/src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.scss new file mode 100644 index 00000000..eb9aa466 --- /dev/null +++ b/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); +} diff --git a/src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.spec.ts b/src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.spec.ts new file mode 100644 index 00000000..bace02e9 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.ts b/src/app/components/rylo-redirect-overlay/rylo-redirect-overlay.component.ts new file mode 100644 index 00000000..88b04fed --- /dev/null +++ b/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 { + event.preventDefault(); + try { + await this.ga.logEvent('rylo_redirect_click'); + } catch { + // Analytics must never block the redirect. + } + window.location.href = this.redirectUrl; + } +} diff --git a/src/app/core/modules/google-analytics/google-analytics.service.ts b/src/app/core/modules/google-analytics/google-analytics.service.ts index 66066a0c..987e3cb7 100644 --- a/src/app/core/modules/google-analytics/google-analytics.service.ts +++ b/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) { + if (!this.isSupported) { + return; + } + await FirebaseAnalytics.logEvent({name, params}); + } + logPerformanceMetrics() { if (!this.isSupported) { return; diff --git a/src/assets/brand/rylo.svg b/src/assets/brand/rylo.svg new file mode 100644 index 00000000..6e97858b --- /dev/null +++ b/src/assets/brand/rylo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/rylo-clouds.webp b/src/assets/rylo-clouds.webp new file mode 100644 index 00000000..33cdda32 Binary files /dev/null and b/src/assets/rylo-clouds.webp differ diff --git a/src/theme/fonts/poppins.css b/src/theme/fonts/poppins.css index 39943f8c..e09db4a8 100644 --- a/src/theme/fonts/poppins.css +++ b/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'); +}