collaboration landing page

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { StandaloneComponent } from "./pages/standalone/standalone/standalone.component";
+import { CallLandingComponent } from "./pages/call-landing/call-landing.component";
 import { PagesComponent } from "./pages/pages.component";
 
 const routes: Routes = [
@@ -8,6 +9,7 @@ const routes: Routes = [
     { path: "idea", component: PagesComponent },
     { path: "standalone", component: StandaloneComponent },
     { path: "playground", component: PagesComponent },
+    { path: "call", component: CallLandingComponent },
     {
         path: "doc", component: PagesComponent, children: [
             { path: 'home', component: PagesComponent },

src/app/app.module.ts

@@ -126,6 +126,7 @@ import { PythonPackageComponent } from './pages/doc/content/other/python-package
 import { FromScratchComponent } from './pages/doc/content/start/from-scratch/from-scratch.component';
 import { PrivacyPolicyComponent } from './pages/doc/content/other/privacy-policy/privacy-policy.component';
 import { ExamplesComponent } from './components/playground/examples/examples.component';
+import { CallLandingComponent } from './pages/call-landing/call-landing.component';
 
 
 @NgModule({
@@ -196,6 +197,7 @@ import { ExamplesComponent } from './components/playground/examples/examples.com
         FromScratchComponent,
         PrivacyPolicyComponent,
         ExamplesComponent,
+        CallLandingComponent,
     ],
     imports: [
         BrowserModule,

src/app/components/header/header.component.ts

@@ -28,7 +28,8 @@ export class HeaderComponent implements OnInit {
                 routerLink: 'playground',
                 command: () => this.tabChange(3)
             },
-            {label: 'DOCUMENTATION', icon: 'pi pi-fw pi-book', routerLink: 'doc', command: () => this.tabChange(4)}]
+            {label: 'DOCUMENTATION', icon: 'pi pi-fw pi-book', routerLink: 'doc', command: () => this.tabChange(4)},
+            { label: 'CALL', icon: 'pi pi-fw pi-phone', routerLink: 'call', command: () => this.tabChange(5) }]
         this.activeTab = this.tabsModel[0];
     }
 

src/app/pages/call-landing/call-landing.component.html

+<div
+  class="container px-4 px-lg-5 align-items-center justify-content-center text-center"
+>
+  <div class="col-lg-12 align-self-end">
+    <h1 class="display-5">Call for Collaboration</h1>
+  </div>
+  <div class="row justify-content-center align-items-center">
+    <div class="col-md-10 text-center">
+      <img
+        class="img-fluid call-image"
+        src="assets/Drugstone_preprint_figure1.png"
+      />
+    </div>
+    <div class="col-md-10 align-self-baseline">
+      <p class="text-white-75 mb-5 blockquote">
+        Drugst.One is a plug-and-play solution for everyone seeking a
+        feature-rich network explorer that bridges the gap between sets of genes
+        or proteins and drug-repurposing candidates.It is capable of instantly
+        enriching biomedical input information. With just one click, users have
+        the option to visualize tissue-specific expression values or link
+        disease-specific protein-protein interactions to disease associations
+        and closely related drugs. The plugin is designed to seamlessly fit into
+        any web application with just three lines of code.
+        <br />
+        For more information, check out our preprint: ___
+      </p>
+      <p class="text-white-75 mb-5 blockquote">
+        We are looking for collaborators to join the Drugst.One initiative. If
+        you want to join the project and integrate Drugst.One to your tool,
+        either as plugin, link-out, or through the python package, and provide
+        feedback or help us develop it, we are looking forward to hearing from
+        you!
+      </p>
+      <a
+        class="btn btn-primary btn-xl"
+        href="https://docs.google.com/forms/d/e/1FAIpQLSfdIXBOW3bgjEmvtcp66p5qnKYPLxgOOm8ZPXG4tVr50SdmIg/viewform?usp=sf_link"
+        target="_blank"
+        >I am interested</a
+      >
+    </div>
+  </div>
+</div>

src/app/pages/call-landing/call-landing.component.scss

+.call-image {
+    width: 60%;
+}
\ No newline at end of file

src/app/pages/call-landing/call-landing.component.spec.ts

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

src/app/pages/call-landing/call-landing.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-call-landing',
+  templateUrl: './call-landing.component.html',
+  styleUrls: ['./call-landing.component.scss']
+})
+export class CallLandingComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/pages.component.html

@@ -5,4 +5,4 @@
 <app-playground #playground *ngIf="currentTabId===3" [theme]="theme" [hidden]="currentTabId!==3" [api]="backendPath"></app-playground>
 <app-doc [hidden]="currentTabId!==4" [api]="backendPath" [version]="'v'+version" [cdn]="cdn"
          [host]="host"></app-doc>
-
+<app-call-landing #call *ngIf="currentTabId===5" [theme]="theme" [hidden]="currentTabId!==5" [api]="backendPath"></app-call-landing>