Add localization

Add pages

src/app/landing-page/landing-page.component.html

@@ -0,0 +1,36 @@
+<h1 class="names">TINEKE <span class="small">&</span> MARC</h1>
+<span class="invite-text">Nodigen jullie uit voor hun bruiloft op</span>
+<h2 class="subtitle">20 september 2024</h2>
+<section class="schedule">
+  <section class="item">
+    <h3>RSVP</h3>
+    <a>Voor 10 augustus</a>
+  </section>
+  <app-heart></app-heart>
+  <section class="item">
+    <h3>Laat ons weten of je komt!</h3>
+    <a [href]="getMailToLink()">Stuur een mail</a>
+  </section>
+  <app-heart></app-heart>
+
+  <section class="item">
+    <h3>Dieetwensen</h3>
+    <span>Laat het ons weten, dan kunnen we er rekening mee houden.</span>
+  </section>
+  <app-heart></app-heart>
+  <section class="item">
+    <h3>Stukjes/inzendingen</h3>
+    <span>Via de ceremoniemeester <a href="mailto:marcentinekegaantrouwen@xz1.nl">Lianne Fokkert</a></span>
+  </section>
+  <app-heart></app-heart>
+  <section class="item">
+    <h3>Cadeautip</h3>
+    <img class="envelope" src="assets/images/envelope.png" alt="Envelope" />
+  </section>
+  <app-heart></app-heart>
+  <section class="item">
+    <h3>Adressen</h3>
+    <a routerLink="directions">Klik</a>
+  </section>
+</section>
+

src/app/landing-page/landing-page.component.scss

@@ -0,0 +1,81 @@
+@use "../../styles/variables";
+
+
+
+h1.names,  {
+  font-size: 34px;
+  font-weight: bold;
+
+  display: flex;
+  justify-content: center;
+
+  .small {
+    font-family: "beautifully-delicious", serif;
+    font-size: 60px;
+    font-style: italic;
+
+    height: 48px;
+    line-height: 29px;
+    padding-left: 18px;
+    padding-right: 18px;
+  }
+}
+
+h1, .subtitle {
+  font-family: variables.$tan-moncheri;
+  text-align: center;
+}
+
+.subtitle {
+  display: block;
+  font-size: 24px;
+  margin-bottom: 60px;
+}
+
+
+.invite-text {
+  display: flex;
+  justify-content: center;
+
+  margin-top: -24px;
+  font-size: 16px;
+}
+
+
+
+h2, h3 {
+  font-weight: normal;
+}
+
+p, h2, h3, .schedule {
+  font-family: variables.$playfair-display;
+}
+
+.schedule {
+  margin-top: 16px;
+  text-align: center;
+
+  .item {
+    h3 {
+      margin-bottom: 0;
+    }
+
+    a {
+      color: rgb(48, 77, 42);;
+
+      &:hover {
+        color: black;
+      }
+    }
+
+  }
+}
+
+p {
+  margin-bottom :0;
+}
+
+img.envelope {
+  width: 64px;
+  margin-top: 8px;
+}

src/app/landing-page/landing-page.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LandingPageComponent } from './landing-page.component';
+
+describe('LandingPageComponent', () => {
+  let component: LandingPageComponent;
+  let fixture: ComponentFixture<LandingPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LandingPageComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(LandingPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/landing-page/landing-page.component.ts

@@ -0,0 +1,54 @@
+import {Component} from '@angular/core';
+import {HeartComponent} from "../heart/heart.component";
+import {RouterLink} from "@angular/router";
+
+@Component({
+  selector: 'app-landing-page',
+  standalone: true,
+  imports: [
+    HeartComponent,
+    RouterLink
+  ],
+  templateUrl: './landing-page.component.html',
+  styleUrl: './landing-page.component.scss'
+})
+export class LandingPageComponent {
+  title = 'marc-en-tineke-2024';
+
+  mailTitleWholeDay = $localize`:@@mailTitleWholeDay:RSVP Trouwen 2024`;
+  mailTitleEvening = $localize`:@@mailTitleEvening:RSVP Trouwen 2024 Avond`;
+
+  whenQuestionOptionsWholeDay = [
+    $localize`:@@whenOptionCeremony:Ceremonie`,
+    $localize`:@@whenOptionCake:Taart & Bubbels`,
+    $localize`:@@whenOptionDinner:Diner`,
+    $localize`:@@whenOptionChurch:Kerkdienst`,
+    $localize`:@@whenOptionParty:Feest`
+  ]
+
+  whenQuestionOptionsEvening = [
+    $localize`:@@whenOptionChurch:Kerkdienst`,
+    $localize`:@@whenOptionParty:Feest`
+  ]
+
+  mailBody = $localize`:@@mailBody:Wat fijn dat je ons laat weten of je er bij bent!%0D%0A
+Ik kom met: %0D%0A
+- X personen%0D%0A %0D%0A
+Ik ben er bij met (verwijder als je niet aanwezig bent):
+%0D%0A
+${this.getWhenQuestions()}%0D%0A
+%0D%0AVerdere opmerkingen/dieetwensen`
+
+
+  getWhenQuestions() {
+    return this.whenQuestionOptionsWholeDay.map(item => `- ${encodeURIComponent(item)}`).join('%0D%0A');
+  }
+
+  getMailToLink() {
+    return `mailto:marcentinekegaantrouwen@xz1.nl?subject=${this.mailTitleWholeDay}&body=${this.mailBody}`.replace('\n', '%0D%0A');
+  }
+
+  goToAddressesPage() {
+
+  }
+}