monitor/src/app/home/home.component.html

<div>
  <div class="uk-section uk-padding-remove-bottom uk-overflow-hidden home-background">
    <div class="uk-container uk-container-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
      <div class="uk-grid uk-flex-middle" uk-grid>
        <div class="uk-width-3-5 uk-margin-large-bottom">
          <h1 class="uk-heading-large" uk-scrollspy-class>
            A new era of <span class="uk-text-primary">monitoring</span> research<span class="uk-text-primary">.</span>
          </h1>
          <div class="uk-text-large uk-margin-medium-top" uk-scrollspy-class>
            <div>Work together with us to view, understand and visualize</div>
            <div>research statistics and indicators.</div>
          </div>
          <div class="uk-margin-medium-top" uk-scrollspy-class>
            <a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
          </div>
        </div>
        <div class="uk-visible@m uk-width-expand" uk-scrollspy-class>
          <div class="uk-position-relative">
            <img style="padding: 1px" src="assets/monitor-assets/home/monitor.jpg" uk-parallax="y: 300">
            <img class="uk-position-top-left" src="assets/monitor-assets/home/mask.svg">
          </div>
        </div>
      </div>
    </div>
  </div>
  <section-scroll [customClass]="'uk-section uk-section-secondary'" [map]="map"
                  [childrenCustomClass]="'uk-container uk-container-large'">
    <div top class="uk-width-1-1">
      <div class="top-content uk-container uk-container-large">
        <span class="uk-h6 uk-text-primary">Benefits</span>
        <h2 class="uk-h1 uk-margin-remove-top">Simplify open science <br>tracking & monitoring<span
            class="uk-text-primary">.</span></h2>
      </div>
    </div>
    <div left class="uk-width-1-1 uk-width-1-2@m uk-background-secondary monitor-dark-logo-background uk-position-z-index">
      <div class="imgContainer uk-flex uk-flex-middle uk-flex-center">
        <img class="uk-animation-fade" id="ipad" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
      </div>
    </div>
    <div scroll class="uk-width-expand">
      <div class="uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
        <div id="1st">
          <h3 class="uk-h2">
            Get a <span class="uk-text-primary">complete <br> picture.</span>
          </h3>
          <p class="uk-text-large">Track and discover your organization’s research output. <br> Use the OpenAIRE Research
            Graph to get a 360o view of <br> your publications-data-code.</p>
        </div>
      </div>
      <div class="uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
        <div id="2nd">
          <h3 class="uk-h2">
            Monitor <span class="uk-text-primary">open science <br></span> compliance<span
              class="uk-text-primary">.</span>
          </h3>
          <p class="uk-text-large"> Work with the open science expert community <br> for open and transparent metrics.
            Discover open <br> science trends for your organization and see how <br> you fare in EOSC.</p>
        </div>
      </div>
      <div class="uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
        <div id="3rd">
          <h3 class="uk-h2">
            Turn <span class="uk-text-primary">research <br> results </span> to insights<span
              class="uk-text-primary">.</span>
          </h3>
          <p class="uk-text-large">Understand your community. Measure impact, <br> discover trends, connections and
            collaborations <br> to improve and optimize your future actions. </p>
        </div>
      </div>
    </div>
  </section-scroll>
  <div class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom uk-overflow-hidden">
    <h2 class="uk-h1 uk-text-center" uk-parallax="scale: 1.7, 1.3, 1,1">
      Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
    </h2>
    <div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-medium-bottom" uk-parallax="y: 80, 40, 0, 0">
      <div class="uk-width-1-1 uk-flex-center uk-grid" uk-grid uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
        <ng-template #numberCard let-numberSize="numberSize" let-name="name" let-url="url">
          <a class="uk-card uk-card-default uk-card-hover uk-position-relative uk-padding-small uk-display-block uk-link-reset"
             [href]="url" target="_blank" uk-scrollspy-class>
            <div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
              <div class="uk-text-center">
                <div
                    class="uk-text-primary-gradient uk-text-bold number">{{(numberSize.number|number) + numberSize.size}}</div>
                <div class="uk-margin-small-top uk-text-large">{{name}}</div>
              </div>
            </div>
          </a>
        </ng-template>
        <div *ngIf="publicationsSize">
          <ng-container *ngTemplateOutlet="numberCard; context: {numberSize: publicationsSize,  name: 'Publications',
            url: 'https://explore.openaire.eu/search/find/research-outcomes?type=publications'}">
          </ng-container>
        </div>
        <div *ngIf="datasetsSize">
          <ng-container *ngTemplateOutlet="numberCard; context: {numberSize: datasetsSize, name: 'Datasets',
            url: 'https://explore.openaire.eu/search/find/research-outcomes?type=dataset'}">
          </ng-container>
        </div>
        <div *ngIf="softwareSize">
          <ng-container *ngTemplateOutlet="numberCard; context: {numberSize: softwareSize, name: 'Software',
            url: 'https://explore.openaire.eu/search/find/research-outcomes?type=software'}">
          </ng-container>
        </div>
        <div *ngIf="otherSize">
          <ng-container *ngTemplateOutlet="numberCard; context: {numberSize: otherSize, name: 'Other',
            url: 'https://explore.openaire.eu/search/find/research-outcomes?type=other'}">
          </ng-container>
        </div>
        <div *ngIf="fundersSize">
          <ng-container *ngTemplateOutlet="numberCard; context: {numberSize: fundersSize, name: 'Funders',
            url: 'https://explore.openaire.eu/search/find/projects'}">
          </ng-container>
        </div>
      </div>
    </div>
  </div>
  <div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
    <div class="uk-grid uk-grid-large" uk-grid>
      <div class="uk-width-1-3@m uk-width-1-1">
        <span class="uk-h6 uk-text-primary">Features</span>
        <h2 class="uk-margin-remove-top">Open data. <br> Open <br> methodologies<span
            class="uk-text-primary">.</span></h2>
        <a class="uk-display-inline-block uk-text-uppercase uk-button-text"
           routerLinkActive="router-link-active" routerLink="/about/learn-how">
					<span class="uk-flex uk-flex-middle">
						<span>Learn More</span>
					</span>
        </a>
      </div>
      <div class="uk-width-expand uk-grid uk-child-width-1-2@m uk-child-width-1-1" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250" uk-grid>
        <div uk-scrollspy-class>
          <div class="uk-icon-bg-shadow uk-margin-bottom">
            <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook"
                  customClass="uk-text-primary-gradient"></icon>
          </div>
          <h5 class="uk-margin-remove-top">Global outlook</h5>
          <div>
            Monitor is built on the OpenAIRE Research Graph. An interconnected scholarly communication shared data
            resource from open initiatives around the world, of global interest.
          </div>
        </div>
        <div uk-scrollspy-class>
          <div class="uk-icon-bg-shadow uk-margin-bottom">
            <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Minimum effort to join"
                  customClass="uk-text-primary-gradient"></icon>
          </div>
          <h5 class="uk-margin-remove-top">Minimum effort to join</h5>
          <div>
            You only share some information with us to include in out backend aggregating and data mining, and we
            deliver a view of your world. As you see fit.
          </div>
        </div>
        <div uk-scrollspy-class>
          <div class="uk-icon-bg-shadow uk-margin-bottom">
            <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Transparent methodology"
                  customClass="uk-text-primary-gradient"></icon>
          </div>
          <h5 class="uk-margin-remove-top">Transparent methodology</h5>
          <div>
            We base our service on open science principles. We rely on open data sources, and document our algorithms
            for every metric and indicator we publish.
          </div>
        </div>
        <div uk-scrollspy-class>
          <div class="uk-icon-bg-shadow uk-margin-bottom">
            <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs"
                  customClass="uk-text-primary-gradient"></icon>
          </div>
          <h5 class="uk-margin-remove-top">Customised to your needs</h5>
          <div>
            Choose from a variety of pre-defined metrics. Select how to visualize them, and who to share with. Use our
            advanced tools and expertise add add your own metrics.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
    <h2 class="uk-h1">Dashboards <br> in action<span class="uk-text-primary">.</span></h2>
    <div class="uk-text-large uk-margin-bottom">
      Short description of “what monitor members are”, sed diam nonumy eirmod <br> tempor invidunt ut labore et dolore
      magna aliquyam erat, sed diam <br> voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </div>
    <a class="uk-display-inline-block uk-text-uppercase uk-button-text"
       routerLinkActive="router-link-active" routerLink="/browse">
			<span class="uk-flex uk-flex-middle">
				<span>Browse them all</span>
			</span>
    </a>
    <div class="uk-margin-large-top">
      <div *ngIf="loading" class="uk-height-large uk-flex uk-flex-column uk-flex-center">
        <loading></loading>
      </div>
      <!-- Tabs -->
      <my-tabs *ngIf="!loading">
        <my-tab [tabTitle]="'All'" [tabId]="'all'" class="uk-active">
          <ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.stakeholders}"></ng-container>
        </my-tab>
        <my-tab [tabTitle]="'Funders'" [tabId]="'funders'">
          <ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.funders}"></ng-container>
        </my-tab>
        <my-tab [tabTitle]="'Research Initiatives'" [tabId]="'ris'">
          <ng-container *ngTemplateOutlet="sliderTemplate; context: {slides:stakeholdersSlider.ris}"></ng-container>
        </my-tab>
        <my-tab [tabTitle]="'Research Institutions'" [tabId]="'organizations'">
          <ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.organizations}"></ng-container>
        </my-tab>
      </my-tabs>
      <!-- Slider Template for Tab Content -->
      <ng-template #sliderTemplate let-slides="slides">
        <div uk-slider class="uk-margin-medium-top">
          <ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
            <!-- Margin right -->
            <li *ngFor="let slide of slides; let i=index" class="uk-width-1-1">
              <div class="uk-padding-small">
                <div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
                  <ng-container *ngIf="i === 0">
                    <div *ngFor="let stakeholder of slide" uk-scrollspy-class>
                      <browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
                    </div>
                  </ng-container>
                  <ng-container *ngIf="i !== 0">
                    <div *ngFor="let stakeholder of slide">
                      <browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
                    </div>
                  </ng-container>
                </div>
              </div>
            </li>
          </ul>
          <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin-medium-top"></ul>
        </div>
      </ng-template>
    </div>
  </div>
  <div id="last-section" class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
    <h2 class="uk-h1">
      Need more information? <br> Get in touch and let us help you<span class="uk-text-primary">.</span>
    </h2>
    <a class="uk-button uk-button-primary uk-text-uppercase uk-margin-medium-top uk-margin-medium-bottom"
       routerLink="/contact-us">Contact us</a>
  </div>
</div>