chore(demo): add sponsor (Omniboard)

Author: tomastrajan

README.md

@@ -120,3 +120,17 @@ or submit a [pull request](https://github.com/angular-extensions/elements/pulls)
 <!-- prettier-ignore-end -->
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
+
+## Sponsors
+
+> Are you currently working in an enterprise environment with many applications and found yourself thinking you could provide so much more value only if you had better overview to plan, track progress and just get things done?
+
+Try _[Omniboard](https://omniboard.dev), the best tool for lead software engineers and architects_
+that helps them to get an overview to drive change by querying and tracking all their code bases!
+
+The free plan let's you get a full overview of all your projects with your first dashboard, tracking up to 3 different things!
+
+<a href="http://www.youtube.com/watch?feature=player_embedded&v=uDnNE9FuLwc" target="_blank">
+    <img src="https://app.omniboard.dev/assets/videos/omniboard-getting-started.png" 
+              alt="Omniboard.dev - getting started in less than 5 minutes" width="100%" />
+</a>

projects/elements-demo/src/app/app.component.html

@@ -15,6 +15,7 @@
   </mat-sidenav>
   <mat-sidenav-content>
     <router-outlet></router-outlet>
+    <demo-sponsor></demo-sponsor>
   </mat-sidenav-content>
 </mat-sidenav-container>
 <demo-footer></demo-footer>

projects/elements-demo/src/app/core/core.module.ts

@@ -6,10 +6,16 @@ import { SharedModule } from '../shared/shared.module';
 
 import { ToolbarComponent } from './layout/toolbar/toolbar.component';
 import { NavigationComponent } from './layout/navigation/navigation.component';
+import { SponsorComponent } from './sponsor/sponsor.component';
 import { FooterComponent } from './layout/footer/footer.component';
 
 @NgModule({
-  declarations: [ToolbarComponent, NavigationComponent, FooterComponent],
+  declarations: [
+    ToolbarComponent,
+    NavigationComponent,
+    SponsorComponent,
+    FooterComponent,
+  ],
   imports: [
     // vendor
     RouterModule,
@@ -30,6 +36,11 @@ import { FooterComponent } from './layout/footer/footer.component';
       },
     },
   ],
-  exports: [ToolbarComponent, NavigationComponent, FooterComponent],
+  exports: [
+    ToolbarComponent,
+    NavigationComponent,
+    SponsorComponent,
+    FooterComponent,
+  ],
 })
 export class CoreModule {}

projects/elements-demo/src/app/core/sponsor/sponsor.component.html

@@ -0,0 +1,35 @@
+<h2>Sponsors</h2>
+<blockquote>
+  Are you currently working in an
+  <strong>enterprise environment with many applications</strong> and found
+  yourself thinking you could provide so much more value only if you had better
+  overview to plan, track progress and just get things done?
+</blockquote>
+
+<div class="wrapper">
+  <div class="description">
+    <p class="main">
+      Try
+      <strong>
+        <a href="https://omniboard.dev" target="_blank" rel="noopener"
+          >Omniboard</a
+        >, the best tool for lead software engineers and architects</strong
+      >
+      that helps them to get an overview to drive change by querying and
+      tracking all their code bases!
+    </p>
+    <p>
+      The free plan let's you get a full overview of all your projects with your
+      first dashboard, tracking up to 3 different things!
+    </p>
+  </div>
+  <video
+    controls
+    poster="https://app.omniboard.dev/assets/videos/omniboard-getting-started.png"
+  >
+    <source
+      src="https://app.omniboard.dev/assets/videos/omniboard-getting-started.mp4"
+      type="video/mp4"
+    />
+  </video>
+</div>

projects/elements-demo/src/app/core/sponsor/sponsor.component.scss

@@ -0,0 +1,51 @@
+:host {
+  display: block;
+  padding: 40px;
+}
+
+h2 {
+  font-weight: bold;
+}
+
+blockquote {
+  font-size: 24px;
+  line-height: 48px;
+  margin: 40px 100px;
+  font-style: normal;
+}
+
+.wrapper {
+  display: flex;
+  > * {
+    width: 50%;
+    padding: 20px;
+  }
+  video {
+    border-radius: 10px;
+  }
+
+  .description {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .main {
+      font-size: 18px;
+    }
+  }
+}
+
+:host-context(.responsive) {
+  blockquote {
+    font-size: 16px;
+    line-height: 32px;
+    margin: 0 0 20px 0;
+  }
+
+  .wrapper {
+    flex-direction: column;
+    > * {
+      width: 100%;
+    }
+  }
+}

projects/elements-demo/src/app/core/sponsor/sponsor.component.spec.ts

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

projects/elements-demo/src/app/core/sponsor/sponsor.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'demo-sponsor',
+  templateUrl: './sponsor.component.html',
+  styleUrls: ['./sponsor.component.scss'],
+})
+export class SponsorComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}