feat: add ads

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

@@ -0,0 +1,5 @@
+<!-- banner-ad.component.html -->
+
+<div class="banner-ad-container">
+  <img src="./icons/ad.png" alt="Banner Ad" class="banner-ad-image">
+</div>

app/src/app/components/banner-ad/banner-ad.component.scss

@@ -0,0 +1,18 @@
+/* banner-ad.component.css */
+
+.banner-ad-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #f5f5f5;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin: auto; /* Center the container */
+}
+
+.banner-ad-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 5px;
+}

app/src/app/components/banner-ad/banner-ad.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BannerAdComponent } from './banner-ad.component';
+
+describe('BannerAdComponent', () => {
+  let component: BannerAdComponent;
+  let fixture: ComponentFixture<BannerAdComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BannerAdComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BannerAdComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app/src/app/components/banner-ad/banner-ad.component.ts

@@ -0,0 +1,21 @@
+// banner-ad.component.ts
+
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-banner-ad',
+  templateUrl: './banner-ad.component.html',
+  styleUrls: ['./banner-ad.component.scss']
+})
+export class BannerAdComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onButtonClick(): void {
+    // Handle button click event (you can add your logic here)
+    console.log('Button clicked! Redirect to the product page or perform other actions.');
+  }
+}

app/src/app/pages/reservations/reservations.module.ts

@@ -9,6 +9,7 @@ import { ReservationsPageRoutingModule } from './reservations-routing.module';
 import { ReservationsPage } from './reservations.page';
 import { TranslateModule } from '@ngx-translate/core';
 import { ReservationsItemComponent } from '../../components/reservations-item/reservations-item.component';
+import {BannerAdComponent} from "../../components/banner-ad/banner-ad.component";
 
 @NgModule({
   imports: [
@@ -18,7 +19,7 @@ import { ReservationsItemComponent } from '../../components/reservations-item/re
     ReservationsPageRoutingModule,
     TranslateModule,
   ],
-  declarations: [ReservationsPage, ReservationsItemComponent],
+  declarations: [ReservationsPage, ReservationsItemComponent, BannerAdComponent],
   exports: [ReservationsItemComponent],
 })
 export class ReservationsPageModule {}

app/src/app/pages/reservations/reservations.page.html

@@ -28,5 +28,6 @@
         ></app-reservations-item>
       </ion-item-group>
     </ion-list>
+    <app-banner-ad></app-banner-ad>
   </div>
 </ion-content>