aggregator/src/app/home/home.component.html

<div>
	<div class="uk-section uk-padding-remove-bottom uk-overflow-hidden">
    <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@m uk-margin-large-bottom">
          <h1 class="uk-h2 uk-width-1-2@m" uk-scrollspy-class>
            Discover open linked research<span class="uk-text-primary">.</span>
          </h1>
					<numbers #numbersComponent [defaultInit]="false"></numbers>
          <div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top uk-width-3-4@xl">
						<advanced-search-input #advanced (searchEmitter)="goTo(true)">
							<entities-selection [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
																	(selectionChange)="entityChanged($event);advanced.focusNext(input, $event)" (disableSelectEmitter)="disableSelectChange($event)"
																	[onChangeNavigate]="false" class="uk-width-2-5"></entities-selection>
							<div class="uk-width-expand" input #input placeholder="Scholary works" [searchable]="true" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
						</advanced-search-input>
						<div *ngIf="selectedEntity === 'result' && input.focused" (click)="$event.stopPropagation();advanced.focusNext(input, $event)" class="uk-dropdown uk-display-block uk-margin-small-top uk-width-auto">
							<div class="uk-padding-small">
								<quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
							</div>
						</div>
          </div>
					<div class="uk-padding-small uk-margin-small-top">
						<div class="uk-text-meta">
							Try browsing by:
						</div>
						<div class="link-actions uk-flex uk-flex-column uk-flex-top uk-margin-small-top">
							<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-small-bottom"
								routerLinkActive="router-link-active" routerLink="/sdgs">
								<span class="uk-flex uk-flex-middle">
									<img src="assets/common-assets/sdg/sdg-dot-img.svg" alt="SDGs logo" loading="lazy">
									<span class="uk-margin-small-left">Sustainable Development Goals (SDG<span class="uk-text-lowercase">s</span>)</span>
								</span>
							</a>
							<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
								routerLinkActive="router-link-active" routerLink="/fields-of-science">
								<span class="uk-flex uk-flex-middle">
									<img src="assets/common-assets/fos/fos-icon.svg" alt="FOS logo" loading="lazy">
									<span class="uk-margin-small-left">Fields of Science (FoS)</span>
								</span>
							</a>
						</div>
					</div>
        </div>
        <div class="uk-visible@m uk-width-expand" uk-scrollspy-class>
					<div class="uk-position-relative">
						<img src="assets/aggregator-assets/home/canada.png" uk-parallax="y: 500">
            <img class="uk-position-bottom-left" src="assets/aggregator-assets/home/mask.svg">
          </div>
        </div>
      </div>
    </div>
  </div>
	<div class="uk-background-muted" *ngIf="aggregator.graphSectionText && aggregator.graphSectionTitle">
		<div class="uk-section uk-section-large uk-container uk-container-large">
			<div class="uk-grid uk-child-width-1-2@m" uk-grid>
				<div>
					<div style="max-width: 600px;">
						<h2 class="uk-margin-small-top">{{aggregator.graphSectionTitle}}<span class="text-graph">.</span></h2>
						<p [innerHtml]="aggregator.graphSectionText"></p>
					</div>
				</div>
				<div class="uk-position-relative">
					<img class="uk-visible@m uk-height-1-1 uk-position-center-right" src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Research Graph" loading="lazy">
				</div>
			</div>
		</div>
	</div>
	<ng-container *ngIf="this.customFilter && this.customFilter.valueId == 'CA'">
		<div *ngIf="funders.length" class="uk-section uk-section-large">
			<h2 class="uk-heading-large uk-text-center uk-width-1-2@m uk-margin-auto">Our Canadian Funders<span class="uk-text-primary">.</span></h2>
			<div class="uk-section uk-container uk-container-large">
				<div class="uk-grid-match uk-grid-medium uk-child-width-1-3 uk-flex-center" uk-grid uk-height-match="target: .logo, .title, .outcomes, .percentage">
					<div *ngFor="let funder of funders">
						<a [routerLink]="properties.searchLinkToResults" [queryParams]="funder.params" class="uk-height-1-1 uk-link-reset uk-display-block">
							<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-text-center funder">
								<img *ngIf="funder.logo" src={{funder.logo}} alt="{{funder.name}}" class="logo" style="max-height: 60px;">
								<div class="uk-margin-top uk-margin-bottom title">{{funder.name}}</div>
								<div class="outcomes">
									<h5 class="uk-margin-remove">{{funder.publications | number}}</h5>
									<span>Research Outcomes Found</span>
								</div>
								<div class="uk-margin-top percentage">
									<h5 class="uk-margin-remove">{{(funder.openAccessPublications / funder.publications) * 100 | number : '1.0-0'}}%</h5>
									<span>Open Access</span>
								</div>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
	</ng-container>
	<div class="uk-section uk-section-large uk-padding-remove-top uk-container uk-container-large uk-margin-large-top">
		<h2 class="uk-h1">Share your research<span class="uk-text-primary">.</span></h2>
		<div class="uk-grid uk-child-width-1-2@m uk-margin-large-top" uk-grid>
			<div>
				<div class="uk-text-center uk-margin-auto" style="max-width:420px;">
					<img src="assets/aggregator-assets/home/linking-home-img.svg" alt="Linking">
					<h5>Link your work.</h5>
					<div>
						Connect all your research. If you can’t find your research results in OpenAIRE, don’t worry! Use our Link Out service , that reaches out to many external sources via APIs, to connect your research results and claim them to your project.
					</div>
					<a class="uk-button uk-button-primary uk-margin-medium-top" routerLink="/participate/claim">
						Learn More
					</a>
				</div>
			</div>
			<div>
				<div class="uk-text-center uk-margin-auto" style="max-width:420px;">
					<img src="assets/aggregator-assets/home/deposit-home-img.svg" alt="Deposit">
					<h5>Deposit your research.</h5>
					<div>
						Whether it’s publications, data or software, select an OpenAIRE compatible repository and share using community standards. Alternatively use Zenodo, a catch-all repository hosted by CERN. All results will be indexed, discoverable and accessible via Canada Explore.
					</div>
					<a class="uk-button uk-button-primary uk-margin-medium-top" routerLink="/participate/deposit/learn-how">
						Learn More
					</a>
				</div>
			</div>
		</div>
	</div>
</div>