add Matomo tracking code

public/images/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/app/app.html

@@ -3,7 +3,11 @@
 <main class="main">
   <app-cover></app-cover>
   <app-welcome></app-welcome>
-  <app-two-events></app-two-events>
-  <app-venue></app-venue>
+  <app-two-events id="events"></app-two-events>
+  <app-venue id="venue"></app-venue>
+  <app-media id="media"></app-media>
+  <app-information id="information"></app-information>
+  <app-cities></app-cities>
+  <app-footer></app-footer>
   <router-outlet />
 </main>

src/app/app.ts

@@ -5,10 +5,25 @@ import { Cover } from './cover/cover';
 import { Welcome } from './welcome/welcome';
 import { TwoEvents } from './two-events/two-events';
 import { Venue } from './venue/venue';
+import { Media } from './media/media';
+import { Information } from './information/information';
+import { Cities } from './cities/cities';
+import { Footer } from './footer/footer';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, Header, Cover, Welcome, TwoEvents, Venue],
+  imports: [
+    RouterOutlet,
+    Header,
+    Cover,
+    Welcome,
+    TwoEvents,
+    Venue,
+    Media,
+    Information,
+    Cities,
+    Footer,
+  ],
   templateUrl: './app.html',
   styleUrl: './app.css',
 })

src/app/cities/cities.html

@@ -0,0 +1,49 @@
+<div class="container mx-auto py-10 px-5 bg-white flex flex-col gap-6 xl:max-w-315 md:px-0">
+  <div
+    class="text-center text-2xl text-ejc-dark font-extrabold leading-[130%] md:text-[40px]">
+    Discover the host cities!
+  </div>
+  <div class="flex flex-col gap-6 md:flex-row">
+    <div class="flex flex-col gap-6 md:flex-1">
+      <img class="aspect-video" src="/images/tatabanya.jpg" alt="Tatabánya" />
+      <div class="text-ejc-dark font-extrabold text-xl text-center">
+        Tatabánya
+      </div>
+      <div class="text-center text-[16px] text-ejc-dark leading-[160%]">
+        Tatabánya, located in north-western Hungary, is a vibrant city with
+        cultural and natural attractions that make it a great destination for
+        athletes and visitors alike. Explore the iconic Turul Monument atop
+        Gerecse Mountain offering panoramic views, and unwind in the scenic
+        Gerecse Forest Park or the nearby Szelim cave, perfect for outdoor
+        enthusiasts and families.
+      </div>
+      <div class="flex justify-center">
+        <div
+          class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
+          More info
+          <app-chevron-right></app-chevron-right>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-6 md:flex-1">
+      <img class="aspect-video" src="/images/tata.png" alt="Tata" />
+      <div class="text-ejc-dark font-extrabold text-xl text-center">Tata</div>
+      <div class="text-center text-[16px] text-ejc-dark leading-[160%]">
+        Tata, known as the “Town of Waters”, is one of Hungary's most
+        picturesque destinations, famous for beautiful lakes, historic landmarks
+        and peaceful atmosphere. Visitors can explore the stunning Old Lake
+        (Öreg-tó), the iconic Tata Castle situated on its shores and enjoy
+        relaxing walks in the English Garden. Surrounded by natural beauty and
+        rich cultural heritage, Tata offers a perfect setting for both
+        recreation and sightseeing.
+      </div>
+      <div class="flex justify-center">
+        <div
+          class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
+          More info
+          <app-chevron-right></app-chevron-right>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/cities/cities.spec.ts

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

src/app/cities/cities.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { ChevronRight } from '../chevron-right/chevron-right';
+
+@Component({
+  selector: 'app-cities',
+  imports: [ChevronRight],
+  templateUrl: './cities.html',
+  styleUrl: './cities.css',
+})
+export class Cities {}

src/app/cover/cover.html

@@ -1,11 +1,21 @@
 <div
-  class="h-[calc(100dvh-76px)] flex flex-col justify-center items-center px-5 gap-6 bg-[#EAEFFA]">
-  <img src="/images/cover_logo.png" class="w-6/12" alt="EJC2026 logo" />
+  class="h-[calc(100dvh-76px)] md:h-[calc(100dvh-108px)] bg-[#EAEFFA] md:bg-[url(/images/tatabanya.jpg)] md:bg-cover md:bg-blend-overlay md:bg-ejc-dark-blue/50 flex flex-col justify-center items-center">
   <div
-    class="text-ejc-dark text-2xl xs:text-[30px] font-extrabold leading-[130%] text-center">
+    class="container flex flex-col justify-center items-center px-5 gap-6 md:flex-row md:justify-around xl:max-w-315 md:px-0">
+    <img
+      src="/images/cover_logo.png"
+      class="w-6/12 md:order-last md:max-h-67 md:w-auto"
+      alt="EJC2026 logo" />
+    <div
+      class="flex flex-col justify-center items-center gap-6 md:gap-7.5 md:items-start">
+      <div
+        class="text-ejc-dark text-2xl xs:text-[30px] font-extrabold leading-[130%] text-center md:text-left md:text-[45px] lg:text-[60px] md:text-white">
         2026 European Junior<br />Championships
       </div>
-  <div class="text-center text-ejc-orange font-bold text-[16px]">
+      <div
+        class="text-center text-ejc-orange font-bold text-[16px] md:text-[20px]">
         18-27 Augustus 2026
       </div>
     </div>
+  </div>
+</div>

src/app/footer/footer.html

@@ -0,0 +1,82 @@
+<div class="w-screen bg-ejc-dark-blue">
+  <div
+    class="container mx-auto flex flex-col gap-6 md:flex-wrap md:justify-center xl:max-w-315 px-5 py-10 md:px-0 lg:flex-row lg:justify-between lg:gap-20 xl:gap-30">
+    <div
+      class="flex flex-col gap-6 md:flex-row lg:flex-1 lg:justify-between lg:gap-0">
+      <div class="flex justify-center md:flex-1 md:justify-start">
+        <img src="/images/logo.png" class="max-w-43.75" alt="Logo" />
+      </div>
+      <div class="flex flex-col gap-3 md:flex-1 sm:items-center md:items-start">
+        <div
+          class="text-white sm:text-center md:text-left font-bold text-[16px] md:text-[20px]">
+          Location
+        </div>
+        <div
+          class="text-white sm:text-center md:text-left text-[16px] leading-[160%] flex flex-col gap-2.5">
+          <div>Tatabányai Multifunkcionális Csarnok</div>
+          <div class="flex gap-2.5 sm:justify-center md:justify-start">
+            <app-marker></app-marker>
+            <div class="text-white sm:text-center md:text-left text-[16px]">
+              2800 Tatabánya, Olimpikon u.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex flex-col gap-6 md:flex-row lg:flex-1 lg:justify-between lg:gap-0">
+      <div class="flex flex-col gap-3 md:flex-1">
+        <div
+          class="text-white sm:text-center md:text-left font-bold text-[16px] md:text-[20px]">
+          Contact
+        </div>
+        <div
+          class="text-white sm:text-center md:text-left text-[16px] leading-[160%] flex flex-col gap-2.5">
+          <div>Hungarian Badminton Association</div>
+          <div
+            class="flex gap-2.5 items-center sm:justify-center md:justify-start">
+            <app-mail></app-mail>
+            <div class="text-white sm:text-center md:text-left text-[16px]">
+              iroda@badminton.hu
+            </div>
+          </div>
+          <div
+            class="flex gap-2.5 items-center sm:justify-center md:justify-start">
+            <app-phone></app-phone>
+            <div class="text-white sm:text-center md:text-left text-[16px]">
+              +36 30 329 5154
+            </div>
+          </div>
+          <div>Badminton Europe</div>
+          <div
+            class="flex gap-2.5 items-center sm:justify-center md:justify-start">
+            <app-mail></app-mail>
+            <div class="text-white sm:text-center md:text-left text-[16px]">
+              events@badmintoneurope.com
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col gap-3 md:flex-1 lg:items-end">
+        <div
+          class="text-white sm:text-center md:text-left font-bold text-[16px] md:text-[20px] lg:pr-10">
+          Follow us!
+        </div>
+        <div class="flex gap-2.5 sm:justify-center md:justify-start">
+          <img
+            src="/images/facebook.png"
+            alt="Facebook"
+            class="w-7.5 md:w-10" />
+          <img
+            src="/images/instagram.png"
+            alt="Instagram"
+            class="w-7.5 md:w-10" />
+          <img src="/images/youtube.png" alt="Youtube" class="w-7.5 md:w-10" />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="flex justify-center text-white text-[12px] mt-6 pb-6">
+    © Magyar Tollaslabda Szövetség
+  </div>
+</div>

src/app/footer/footer.spec.ts

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

src/app/footer/footer.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { Marker } from '../marker/marker';
+import { Mail } from '../mail/mail';
+import { Phone } from '../phone/phone';
+
+@Component({
+  selector: 'app-footer',
+  imports: [Marker, Mail, Phone],
+  templateUrl: './footer.html',
+  styleUrl: './footer.css',
+})
+export class Footer {}

src/app/header/header.html

@@ -1,15 +1,73 @@
 <div class="w-screen bg-ejc-orange h-10.25 hidden md:flex items-center">
-  <div class="container mx-auto">aaa</div>
+  <div class="container mx-auto flex justify-between xl:max-w-315">
+    <div class="flex gap-6">
+      <div class="flex gap-2.5 items-center">
+        <app-mail></app-mail>
+        <div class="text-white text-[13px] font-bold">office@badminton.hu</div>
+      </div>
+      <div class="flex gap-2.5 items-center">
+        <app-phone></app-phone>
+        <div class="text-white text-[13px] font-bold">+36 30 329 5154</div>
+      </div>
+    </div>
+    <div class="flex gap-6 text-[13px] font-bold text-ejc-dark">
+      <div>
+        <a class="text-ejc-dark" href="https://badmintoneurope.com">
+          Badminton Europe
+        </a>
+      </div>
+      <div>
+        <a class="text-ejc-dark" href="https://badminton.hu">badminton.hu</a>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="w-screen bg-ejc-dark-blue h-16.75 hidden md:flex items-center">
+  <div class="container mx-auto flex justify-between xl:max-w-315">
+    <img class="w-5.25" src="/images/logo-small.png" alt="Logo" />
+    <div class="flex gap-6 text-[16px] font-bold text-white">
+      <div>
+        <a
+          class="text-white font-extrabold cursor-pointer"
+          (click)="scrollTo('events');">
+          Events
+        </a>
+      </div>
+      <div>
+        <a
+          class="text-white font-extrabold cursor-pointer"
+          (click)="scrollTo('venue');">
+          Venue
+        </a>
+      </div>
+      <div>
+        <a
+          class="text-white font-extrabold cursor-pointer"
+          (click)="scrollTo('media');">
+          Media
+        </a>
+      </div>
+      <div>
+        <a
+          class="text-white font-extrabold cursor-pointer"
+          (click)="scrollTo('information');">
+          Information
+        </a>
+      </div>
+    </div>
+  </div>
 </div>
 <div
   #menuContainer
   class="w-screen flex md:hidden items-center h-19 bg-ejc-dark-blue justify-between px-5 relative">
-  <div>logo</div>
+  <div>
+    <img class="w-10" src="/images/logo-small.png" alt="Logo" />
+  </div>
 
   <button
     type="button"
     (click)="isMenuOpen = !isMenuOpen"
-    class="flex items-center justify-center">
+    class="flex items-center justify-center cursor-pointer">
     <!-- Hamburger icon -->
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -30,21 +88,24 @@
     #menu
     class="absolute top-full right-0 mt-2 w-56 rounded-lg shadow-lg bg-white z-50">
     <a
-      class="block px-4 py-3 hover:bg-gray-100 transition-colors cursor-pointer"
-      (click)="closeMenu()">
-      Menu Item 1
+      class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer"
+      (click)="scrollTo('events'); closeMenu()">
+      Events
     </a>
-
     <a
-      class="block px-4 py-3 hover:bg-gray-100 transition-colors cursor-pointer"
-      (click)="closeMenu()">
-      Menu Item 2
+      class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer"
+      (click)="scrollTo('venue'); closeMenu()">
+      Venue
     </a>
-
     <a
-      class="block px-4 py-3 hover:bg-gray-100 transition-colors cursor-pointer"
-      (click)="closeMenu()">
-      Menu Item 3
+      class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer"
+      (click)="scrollTo('media'); closeMenu()">
+      Media
+    </a>
+    <a
+      class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer"
+      (click)="scrollTo('information'); closeMenu()">
+      Information
     </a>
   </div>
   }

src/app/header/header.ts

@@ -1,8 +1,10 @@
 import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
+import { Phone } from '../phone/phone';
+import { Mail } from '../mail/mail';
 
 @Component({
   selector: 'app-header',
-  imports: [],
+  imports: [Phone, Mail],
   templateUrl: './header.html',
   styleUrl: './header.css',
 })
@@ -20,6 +22,10 @@ export class Header {
     this.isMenuOpen = false;
   }
 
+  scrollTo(id: string): void {
+    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
+  }
+
   @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.isMenuOpen) {

src/app/information/information.html

@@ -0,0 +1,77 @@
+<div class="w-screen bg-ejc-dark-blue">
+  <div
+    class="container mx-auto px-5 py-10 flex flex-col gap-6 md:py-20 xl:max-w-315 md:px-0">
+    <div
+      class="text-white font-extrabold text-2xl text-center md:text-[40px] md:text-left">
+      Useful Information
+    </div>
+    <div class="flex flex-col gap-6 md:flex-row md:flex-wrap">
+      <div class="flex flex-col gap-6 md:w-full">
+        <div
+          class="bg-white p-10 text-ejc-dark font-bold text-[16px] leading-[130%]">
+          For direct event information please download the Sportity app and
+          insert this password:<br />EJC2026
+        </div>
+      </div>
+      <div
+        class="flex flex-col gap-6 md:w-full md:flex-row md:flex-wrap xl:flex-nowrap">
+        <div class="flex flex-col gap-6 md:w-full md:flex-row">
+          <div
+            class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
+            <div class="font-bold text-[16px] leading-[130%]">
+              Emergency number
+            </div>
+            <div class="text-[16px] leading-[130%]">112</div>
+          </div>
+          <div
+            class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
+            <div class="font-bold text-[16px] leading-[130%]">
+              Nearest hospital
+            </div>
+            <div class="text-[16px] leading-[160%]">
+              <p class="mb-3">
+                Komárom-Esztergom Vármegyei Szent Borbála Kórház 2800
+              </p>
+              <p>Tatabánya, Dózsa György út 77.</p>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-col gap-6 md:w-full md:flex-row">
+          <div
+            class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
+            <div class="font-bold text-[16px] leading-[130%]">
+              On-site medical services
+            </div>
+            <div class="text-[16px] leading-[130%]"></div>
+          </div>
+          <div
+            class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
+            <div class="font-bold text-[16px] leading-[130%]">
+              Massage booking
+            </div>
+            <div class="text-[16px] leading-[130%]"></div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col gap-6 md:w-full md:flex-row">
+        <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
+          <div class="font-bold text-[16px] leading-[130%]">Currency</div>
+          <div class="text-[16px] leading-[160%]">
+            <p class="mb-3">Hungarian Forint - HUF</p>
+            <p>Nowadays, the average exchange rate: 1 Euro = 355 HUF</p>
+          </div>
+        </div>
+        <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
+          <div class="font-bold text-[16px] leading-[130%]">
+            Weather in August
+          </div>
+          <div class="text-[16px] leading-[160%]">
+            August is typically the hottest month in Hungary. The temperature
+            hits about 30℃ during the day, falling away to a balmy 19℃ at night.
+            On average, there will be 2 rainy days during the month
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/information/information.spec.ts

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

src/app/information/information.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-information',
+  imports: [],
+  templateUrl: './information.html',
+  styleUrl: './information.css',
+})
+export class Information {}

src/app/mail/mail.html

@@ -0,0 +1,10 @@
+<svg
+  width="20"
+  height="15"
+  viewBox="0 0 20 15"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M1.875 0C0.839844 0 0 0.839844 0 1.875C0 2.46484 0.277344 3.01953 0.75 3.375L9.25 9.75C9.69531 10.082 10.3047 10.082 10.75 9.75L19.25 3.375C19.7227 3.01953 20 2.46484 20 1.875C20 0.839844 19.1602 0 18.125 0H1.875ZM0 4.375V12.5C0 13.8789 1.12109 15 2.5 15H17.5C18.8789 15 20 13.8789 20 12.5V4.375L11.5 10.75C10.6094 11.418 9.39062 11.418 8.5 10.75L0 4.375Z"
+    fill="#FCF1EE" />
+</svg>

src/app/mail/mail.spec.ts

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

src/app/mail/mail.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-mail',
+  imports: [],
+  templateUrl: './mail.html',
+  styleUrl: './mail.css',
+})
+export class Mail {}

src/app/marker/marker.html

@@ -1,6 +1,7 @@
 <svg
   width="16"
   height="21"
+  class="overflow-visible"
   viewBox="0 0 16 21"
   fill="none"
   xmlns="http://www.w3.org/2000/svg">

src/app/media/media.html

@@ -0,0 +1,26 @@
+<div class="container mx-auto px-5 py-10 bg-white xl:max-w-315 md:px-0">
+  <div class="font-extrabold text-ejc-dark text-2xl text-center md:text-[40px]">
+    Media
+  </div>
+</div>
+<div
+  class="container mx-auto px-5 pb-10 bg-white flex flex-col gap-5 md:flex-row xl:max-w-315 md:px-0">
+  <div
+    class="md:order-last md:flex-1 md:flex md:justify-center md:items-center">
+    <img
+      src="/images/badminton_europe_tv.png"
+      class="w-full md:max-w-98.75 md:max-h-30"
+      alt="Badminton Europe TV" />
+  </div>
+  <div class="flex flex-col gap-5 md:flex-1">
+    <div
+      class="font-extrabold text-2xl text-ejc-dark leading-[130%] md:text-[40px]">
+      Watch every match live on badmintoneurope.tv
+    </div>
+    <div
+      class="w-45.75 py-3.75 px-7.5 rounded-md flex items-center gap-2.5 bg-ejc-orange">
+      <div class="font-bold text-[17px] text-white">Watch now</div>
+      <app-chevron-right />
+    </div>
+  </div>
+</div>

src/app/media/media.spec.ts

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

src/app/media/media.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { ChevronRight } from '../chevron-right/chevron-right';
+
+@Component({
+  selector: 'app-media',
+  imports: [ChevronRight],
+  templateUrl: './media.html',
+  styleUrl: './media.css',
+})
+export class Media {}

src/app/phone/phone.html

@@ -0,0 +1,10 @@
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M6.44141 0.960842C6.14062 0.234279 5.34766 -0.15244 4.58984 0.0545917L1.15234 0.992092C0.472656 1.17959 0 1.79678 0 2.4999C0 12.164 7.83594 19.9999 17.5 19.9999C18.2031 19.9999 18.8203 19.5272 19.0078 18.8476L19.9453 15.4101C20.1523 14.6522 19.7656 13.8593 19.0391 13.5585L15.2891 11.996C14.6523 11.7304 13.9141 11.914 13.4805 12.4491L11.9023 14.3749C9.15234 13.0741 6.92578 10.8476 5.625 8.09756L7.55078 6.52334C8.08594 6.08584 8.26953 5.35147 8.00391 4.71475L6.44141 0.964748V0.960842Z"
+    fill="#FCF1EE" />
+</svg>

src/app/phone/phone.spec.ts

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

src/app/phone/phone.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-phone',
+  imports: [],
+  templateUrl: './phone.html',
+  styleUrl: './phone.css',
+})
+export class Phone {}

src/app/two-events/two-events.html

@@ -1,9 +1,15 @@
-<div class="container mx-auto py-10 px-5 bg-white flex flex-col gap-6">
-  <div class="text-center text-2xl text-ejc-dark font-extrabold leading-[130%]">
+<div
+  class="container mx-auto py-10 px-5 bg-white flex flex-col gap-6 md:px-0 md:py-20 xl:max-w-315">
+  <div
+    class="text-center text-2xl text-ejc-dark font-extrabold leading-[130%] md:text-[40px]">
     Follow the two events!
   </div>
+  <div class="flex flex-col gap-6 md:flex-row">
     <div class="flex flex-col gap-6">
-    <img src="/images/team_event.png" alt="Team Event" />
+      <img
+        class="md:aspect-video"
+        src="/images/team_event.png"
+        alt="Team Event" />
       <div class="text-ejc-dark font-extrabold text-xl text-center">
         2026 European Junior Team Championships
       </div>
@@ -20,7 +26,10 @@
       </div>
     </div>
     <div class="flex flex-col gap-6">
-    <img src="/images/individual_event.png" alt="Individual Event" />
+      <img
+        class="md:aspect-video"
+        src="/images/individual_event.png"
+        alt="Individual Event" />
       <div class="text-ejc-dark font-extrabold text-xl text-center">
         2026 European Junior Championships
       </div>
@@ -37,3 +46,4 @@
       </div>
     </div>
   </div>
+</div>

src/app/venue/venue.html

@@ -1,34 +1,49 @@
-<div class="container mx-auto bg-ejc-orange px-5 py-10 flex flex-col gap-6">
-  <img src="/images/csarnok.jpg" alt="Hall" />
-  <div class="text-white font-extrabold text-2xl">Venue</div>
+<div class="w-screen bg-ejc-orange">
+  <div
+    class="container mx-auto px-5 py-10 flex flex-col gap-6 md:flex-row lg:pb-0 md:gap-15 lg:gap-20 xl:max-w-315 md:px-0">
+    <div class="md:order-last flex-1 md:flex md:items-center">
+      <img
+        class="inline-block md:hidden"
+        src="/images/csarnok.jpg"
+        alt="Hall" />
+      <img
+        class="md:inline-block hidden md:w-147.5"
+        src="/images/csarnok.png"
+        alt="Hall" />
+    </div>
+    <div class="flex flex-col gap-6 flex-1 md:flex-2 lg:flex-1">
+      <div class="text-white font-extrabold text-2xl md:text-[40px]">Venue</div>
       <div class="text-white text-[16px] leading-[160%]">
         The Tatabánya Multifunctional Sports Hall is a state-of-the-art indoor
         sports arena with a seating capacity of around 6,000, opened in 2022.
         Designed to host international and high-level competitions, it offers
         versatile facilities suitable for badminton, handball, basketball,
-    volleyball and other indoor sports, as well as major cultural and sporting
-    events.
+        volleyball and other indoor sports, as well as major cultural and
+        sporting events.
       </div>
-  <div class="flex flex-col gap-6">
-    <div class="flex gap-2.5">
+      <div class="flex flex-col gap-6 lg:flex-row lg:flex-wrap">
+        <div class="flex flex-col gap-6 lg:flex-row lg:w-full lg:flex">
+          <div class="flex gap-2.5 lg:flex-col lg:flex-1">
             <app-marker></app-marker>
             <div class="text-white font-bold text-[16px]">
               2800 Tatabánya, Olimpikon u.
             </div>
           </div>
-    <div class="flex gap-2.5">
+          <div class="flex gap-2.5 lg:flex-col lg:flex-1">
             <app-car></app-car>
             <div class="text-white font-bold text-[16px]">
               500 parkingplaces are available
             </div>
           </div>
-    <div class="flex gap-2.5">
+        </div>
+        <div class="flex flex-col gap-6 lg:flex-row lg:w-full lg:flex">
+          <div class="flex gap-2.5 lg:flex-col lg:flex-1">
             <app-bus></app-bus>
             <div class="text-white font-bold text-[16px]">
               Shuttle buses from and to the official hotels
             </div>
           </div>
-    <div class="flex gap-2.5">
+          <div class="flex gap-2.5 lg:flex-col lg:flex-1">
             <app-bus></app-bus>
             <div class="text-white font-bold text-[16px]">
               The schedule is available on the Sportity app
@@ -36,3 +51,6 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
+</div>

src/app/welcome/welcome.html

@@ -1,4 +1,6 @@
 <div
-  class="bg-ejc-orange py-10 px-5 text-center text-white font-extrabold text-2xl leading-[130%]">
+  class="bg-ejc-orange py-10 px-5 text-center text-white font-extrabold text-2xl leading-[130%] md:px-0 md:py-20 md:text-[40px] md:text-left">
+  <div class="container mx-auto xl:max-w-315">
     Welcome to the 2026 Europen Junior Championships in Tatabánya, Hungary!
   </div>
+</div>

src/index.html

@@ -1,11 +1,44 @@
 <!doctype html>
 <html lang="en">
   <head>
-  <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>2026 European Junior Championships</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/images/apple-touch-icon.png" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/images/favicon-32x32.png" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/images/favicon-16x16.png" />
+    <link rel="manifest" href="/images/site.webmanifest" />
+    <!-- Matomo -->
+    <script>
+      var _paq = (window._paq = window._paq || []);
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function () {
+        var u = 'https://analytics.tothbt.com/';
+        _paq.push(['setTrackerUrl', u + 'matomo.php']);
+        _paq.push(['setSiteId', '6']);
+        var d = document,
+          g = d.createElement('script'),
+          s = d.getElementsByTagName('script')[0];
+        g.async = true;
+        g.src = u + 'matomo.js';
+        s.parentNode.insertBefore(g, s);
+      })();
+    </script>
+    <!-- End Matomo Code -->
   </head>
   <body>
     <app-root></app-root>