mobile design until Footer section

src/app/media/media.html

@@ -0,0 +1,15 @@
+<div class="container mx-auto px-5 py-10 bg-white">
+    <div class="font-extrabold text-ejc-dark text-2xl text-center">
+        Media
+    </div>
+</div>
+<div class="container mx-auto px-5 pb-10 bg-white flex flex-col gap-5">
+    <img src="/images/badminton_europe_tv.png" alt="Badminton Europe TV">
+    <div class="font-extrabold text-2xl text-ejc-dark leading-[130%]">
+        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>

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 {}