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>Discover, track and understand trends and indicators <br> on Open Science for your organization.</div>
						<div>Make informed decisions.</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>

  <ng-template #scrolling_text let-position_class="position_class">
    <div [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 80%,0">
      <h3 class="uk-h2">
        Get a <span class="uk-text-primary">360° view <br> of research results.</span>
      </h3>
      <p class="uk-text-large">Track and discover your organization’s research output. <br> Use the <a href="https://graph.openaire.eu/" target="_blank">OpenAIRE Research
        Graph</a> to view your publications-data-code <br> and how they interconnect.</p>
    </div>
    <div [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 80%,0">
      <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. See how <br> you fare in European Open Science Cloud.</p>
    </div>
    <div [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1">
      <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 needs for your community. Measure impact, <br> discover trends, connections and
        collaborations <br> to improve and optimize your future actions.</p>
    </div>
  </ng-template>

  <div class="uk-section uk-section-secondary">
    <div class="uk-container uk-container-large">
      <div class="uk-width-1-1">
        <span class="uk-h6 uk-text-primary">Funders. Universities. Research Institutions. Communities.</span>
        <h2 class="uk-h1 uk-margin-remove-top">Simplify Open Science <br>tracking & monitoring<span
          class="uk-text-primary">.</span></h2>
      </div>
      <div id="js-sticky-parallax-images-all" style="min-height: 300vh">
        <div class="uk-visible@m uk-height-viewport monitor-dark-logo-background uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true">
          <div class="uk-grid" uk-grid>
            <div class="uk-width-expand uk-first-column">
              <div class="monitor-dark-logo-background"><!-- uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true"-->
                <div uk-parallax="target: #js-sticky-parallax-images-all;"> <!--  y: 55vh, 45vh; -->
                  <img class="uk-position-center-left" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy"
                       uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0"
                       style="height: 70vh">

    <!--              <img class="uk-position-center-left" src="assets/monitor-assets/home/ipad.png" width="1800" height="1200" alt=""-->
    <!--                   uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing:0">-->
    <!--              <img class="uk-position-center-left" src="assets/monitor-assets/home/monitor.jpg" width="1800" height="1200" alt=""-->
    <!--                   uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 16.666%,1 99%,0; easing:0">-->
    <!--              <img class="uk-position-center-left" src="assets/monitor-assets/home/ipad.png" width="1800" height="1200" alt=""-->
    <!--                   uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1; easing:0">-->
                </div>
              </div>
            </div>
            <div class="uk-inline uk-width-expand">
              <div class=""><!-- uk-sticky="bottom: #js-sticky-parallax-images-all"-->
                <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
                  <ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center-left'}"></ng-container>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="uk-hidden@m uk-height-viewport monitor-dark-logo-background" uk-sticky="bottom: #js-sticky-parallax-images-all">
          <div class="uk-flex uk-flex-column">
            <div class="monitor-dark-logo-background uk-inline uk-width-1-1" style="height: 50vh;">
              <div class="uk-position-center uk-height-1-1" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0">
                <img class="uk-height-1-1" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
              </div>
            </div>
            <div class="uk-inline uk-width-expand">
              <ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-top-center'}"></ng-container>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

	<div class="uk-background-norepeat graph-background">
		<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-text-center uk-margin-top" uk-parallax="y: 80, 40, 0, 0">
				The OpenAIRE Research Graph is one of the largest open scholarly record collections <br>
				worldwide, key in fostering Open Science and establishing its practices in the daily <br>
				research activities. Conceived as a public and transparent good, populated out of data <br>
				sources trusted by scientists, the Graph aims at bringing discovery, monitoring, and <br>
				assessment of science back in the hands of the scientific community.
			</div>
			<div class="uk-flex uk-flex-center uk-margin-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-background 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>
  <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">
        <h2 class="uk-margin-remove-top">Open data. <br> Open <br> methodologies<span
            class="uk-text-primary">.</span></h2>
				<div class="uk-text-large uk-margin-bottom">Learn and work with a thriving community behind you.</div>
        <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-background"></icon>
          </div>
          <h5 class="uk-margin-remove-top">Global outlook</h5>
          <div>
            Monitor is built on the <a href="https://graph.openaire.eu/" class="graph" target="_blank">OpenAIRE Research
						Graph</a>. A comprehensive and global linked research graph, shared data resource from open initiatives around the world.
          </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-background"></icon>
          </div>
          <h5 class="uk-margin-remove-top">Minimum effort to join</h5>
          <div>
            You only share some information with us to include in our 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-background"></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-background"></icon>
          </div>
          <h5 class="uk-margin-remove-top">Responsive to your needs</h5>
          <div>
            Choose from a variety of pre-defined metrics on compliance, trends, distribution, costs. 
						Select how to visualize them and who to share with. Use our advanced tools to 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">
      View existing dashboards from collaborating organizations. <br> Get a preview on how they work and how our service <br> can be customized to serve you.
    </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</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>
      <ng-container *ngIf="!loading">
        <ul class="uk-tab" uk-tab>
          <li><a>All</a></li>
          <li><a>Funders</a></li>
          <li><a>Research Initiatives</a></li>
          <li><a>Research Institutions</a></li>
        </ul>
        <ul class="uk-switcher">
          <li>
            <ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.stakeholders}"></ng-container>
          </li>
          <li>
            <ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.funders}"></ng-container>
          </li>
          <li>
            <ng-container *ngTemplateOutlet="sliderTemplate; context: {slides:stakeholdersSlider.ris}"></ng-container>
          </li>
          <li>
            <ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.organizations}"></ng-container>
          </li>
        </ul>
      </ng-container>
      <!-- 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">
    <h3>
      Need more information or a demo? <br> Get in touch and let us show you in practice <br> how you can apply to your needs<span class="uk-text-primary">.</span>
    </h3>
    <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>