<!-- Redesign START -->
<ng-template #_logos let-logo="logo" let-class="class">
  <div *ngIf="logo" [class]="'uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal '+class">
    <div class="">
      <img src="assets/ExploreLogos/{{logo}}" alt="{{logo}} logo" loading="lazy" width="112px" height="44px">
    </div>
  </div>
</ng-template>

<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-h2" uk-scrollspy-class>
            Lorem ipsum dolor sit <br> amet, consetetur<span class="uk-text-primary">.</span>
          </h1>
          <div class="uk-text-large uk-margin-medium-top" uk-scrollspy-class>
						<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</div>
						<div>nonumy eirmod tempor invidunt ut labore et dolore magna</div>
						<div>aliquyam erat, sed diam voluptua.</div>
          </div>
          <div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top uk-width-3-5@m" uk-scrollspy-class>
						<advanced-search-input (searchEmitter)="goTo(true)">
							<entities-selection #entities [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
																	(selectionChange)="entityChanged($event)" (disableSelectEmitter)="disableSelect = $event"
																	[onChangeNavigate]="false"></entities-selection>
							<div input placeholder="Scholary works" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
						</advanced-search-input>
						<div class="uk-padding-small uk-flex uk-flex-middle">
							<div class="uk-text-bold uk-margin-right">
								Try:
							</div>
							<div class="link-actions uk-flex uk-flex-middle">
								<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-right"
									routerLinkActive="router-link-active" routerLink="/sdg">
									<span class="uk-flex uk-flex-middle">
										<img src="../../assets/explore-assets/sdg-dot-img.svg" alt="SDGs logo" loading="lazy">
										<span class="uk-margin-small-left">Browse by SDGs</span>
									</span>
								</a>
								<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
									routerLinkActive="router-link-active" routerLink="/fos">
									<span class="uk-flex uk-flex-middle">
										<img src="../../assets/explore-assets/fos-hero-img.svg" alt="FOS logo" loading="lazy">
										<span class="uk-margin-small-left">Browse by FOS</span>
									</span>
								</a>
							</div>
						</div>
						<div *ngIf="selectedEntity === 'result' && !entities.input.focused" class="uk-dropdown uk-display-block uk-margin-top uk-width-auto">
							<div class="uk-padding-small">
								<quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
							</div>
						</div>
          </div>
        </div>
        <div class="uk-visible@m uk-width-expand" uk-scrollspy-class>
					<div class="uk-position-relative">
						<img src="assets/explore-assets/home/explore.jpg" uk-parallax="y: 300">
            <img class="uk-position-bottom-left" src="assets/explore-assets/home/mask.svg">
          </div>
        </div>
      </div>
    </div>
  </div>
	<div class="uk-section uk-section-large uk-padding-remove-top home-background">
		<div class="uk-container uk-container-large uk-width-1-2">
			<div uk-slider="autoplay: true; autoplay-interval: 2500" class="">
				<div class="uk-position-relative">
					<div class="uk-slider-container">
						<ul class="uk-slider-items" uk-height-match="target: > li > div > div > .logo1; row: false;">
							<ng-container *ngFor="let type of getKeys(logos)">
								<li *ngFor="let range of createRange(logos[type].length) let j=index"
										class="uk-width-1-1 home-logo">
									<h1 class="uk-text-center uk-margin-large-bottom uk-text-primary uk-h4">
											<span *ngIf="type=='publication' && showPublications && numbers?.publicationsSize">
												<span
														class="uk-text-bold">{{numbers.publicationsSize.number|number}}{{numbers.publicationsSize.size}}
													publications</span><span> deduplicated</span>
											</span>
										<span
												*ngIf="type=='dataset' && showDatasets && (numbers?.datasetsLinkedSize || numbers?.datasetsSize)">
												<span *ngIf="numbers?.datasetsLinkedSize">
															<span
																	class="uk-text-bold">{{numbers.datasetsLinkedSize.number|number}}{{numbers.datasetsLinkedSize.size}}
																datasets</span> interlinked with publications</span>
												<span *ngIf="numbers?.datasetsSize && !numbers?.datasetsLinkedSize"
															class="uk-text-bold">{{numbers.datasetsSize.number|number}}{{numbers.datasetsSize.size}}
													research data</span>
											</span>
										<span
												*ngIf="type=='software' && showSoftware && (numbers?.softwareSize || numbers?.softwareLinkedSize)">
												<span *ngIf="numbers?.softwareLinkedSize">
													<span
															class="uk-text-bol ">{{numbers.softwareLinkedSize.number|number}}{{numbers.softwareLinkedSize.size}}
														research
														software</span>  interlinked with publications</span>
												<span *ngIf="numbers?.softwareSize && !numbers?.softwareLinkedSize"
															class="uk-text-bold">{{numbers.softwareSize.number|number}}{{numbers.softwareSize.size}}
													research software</span>
											</span>
										<span *ngIf="type=='persistent'">
												<span>Persistent identifiers and registries</span>
											</span>
										<span *ngIf="type=='funder' && showProjects && numbers?.fundersSize && numbers?.projectsSize">
												<span
														class="uk-text-bold">{{numbers.fundersSize.number|number}}{{numbers.fundersSize.size}}
													funders</span><span> and</span>
												<span
														class="uk-text-bold"> {{numbers.projectsSize.number|number}}{{numbers.projectsSize.size}}
													funded grants</span>
											</span>

									</h1>
									<div
											class="uk-grid-small  uk-child-width-1-6 uk-text-center grid uk-flex uk-flex-center"
											uk-grid uk-height-match="target: > div > .logo2; row: false;">
										<div
												*ngFor="let logo of logos[type][j].slice(0,ceil(logos[type][j].length/2)); let i=index">
											<ng-container
													*ngTemplateOutlet="_logos; context: { logo: logo, class: 'logo1 '}"></ng-container>
											<ng-container
													*ngTemplateOutlet="_logos; context: { logo: logos[type][j][ceil(logos[type][j].length/2)+i], class: 'uk-margin-top logo2 '}"></ng-container>
										</div>
									</div>
								</li>
							</ng-container>
						</ul>
					</div>

					<div class="uk-hidden@s">
						<a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous
							uk-slider-item="previous">
							<span class="visually-hidden">prev</span>
						</a>
						<a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next
							uk-slider-item="next">
							<span class="visually-hidden">next</span>
						</a>
					</div>

					<div class="uk-visible@s">
						<a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous
							uk-slider-item="previous">
							<span class="visually-hidden">prev</span>
						</a>
						<a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next
							uk-slider-item="next">
							<span class="visually-hidden">next</span>
						</a>
					</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">
        <span class="uk-text-primary">Deposit</span> your research<span class="uk-text-primary">.</span>
      </h3>
      <p class="uk-text-large">
				Deposit in a repository of your choice. Select an OpenAIRE <br> compatible repository (2.0 +) so that your research is linked <br> to your funding information. Use Zenodo, a catch-all <br> repository hosted by CERN to deposit all your research <br> results (publications, data, software, etc.)
			</p>
			<div class="uk-margin-medium-top">
				<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/participate/deposit/learn-how">Start Deposit</a>
			</div>
    </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">
        <span class="uk-text-primary">Link</span> your work<span class="uk-text-primary">.</span>
      </h3>
      <p class="uk-text-large">
				Connect all your research. If you can't find your research <br> results in OpenAIRE, don't worry! Use our Link Out service, <br> that reaches out to many external sources via APIs, to <br> connect your research results and claim them to your <br> project.
			</p>
			<div class="uk-margin-medium-top">
				<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/participate/claim">Start Linking</a>
			</div>
    </div>
  </ng-template>

	<div class="uk-section uk-section-secondary">
    <div class="uk-container uk-container-large">
      <div class="uk-width-1-1">
        <h2 class="uk-h1 uk-margin-remove-top">Lorem ipsum lorem<span class="uk-text-primary">.</span></h2>
      </div>
      <div id="js-sticky-parallax-images-all" style="min-height: 200vh">
        <div class="uk-visible@m uk-height-viewport explore-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="explore-dark-logo-background">
                <div uk-parallax="target: #js-sticky-parallax-images-all;">
									<!-- TODO: change ipad image -->
                  <img class="uk-position-center-left" src="assets/explore-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">
                </div>
              </div>
            </div>
            <div class="uk-inline uk-width-expand">
              <div>
                <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 explore-dark-logo-background" uk-sticky="bottom: #js-sticky-parallax-images-all">
          <div class="uk-flex uk-flex-column">
            <div class="explore-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>

	<!-- Not yet! -->
	<!-- <div class="uk-section">
		<div class="uk-container uk-container-large">
			<h2 class="uk-h1 uk-text-center">
				New sources in <br> OpenAIRE<span class="uk-text-primary">.</span>
			</h2>
			<div class="cards-on-slider">
				TODO: Repositories content 
			</div>
		</div>
	</div> -->

	<div class="uk-background-muted">
		<div class="graph-background uk-background-top-right">
			<div class="uk-section uk-section-large">
				<div class="uk-container uk-container-large">
					<div class="uk-grid uk-child-width-1-2@m" uk-grid>
						<div>
							<h2>Extracted Metadata <br> Combined.</h2>
							<div>
								The OpenAIRE Research Graph is one of the largest open scholarly record <br> collections worldwide, key in fostering Open Science and establishing its <br> practices in the daily research activities. Conceived as a public and <br> transparent good, populated out of data sources trusted by scientists, the <br> Graph aims at bringing discovery, monitoring, and assessment of science <br> back in the hands of the scientific community.
							</div>
						</div>
						<div></div>
					</div>
				</div>
			</div>
		</div>
		<div class="uk-section uk-padding-remove-top">
			<div class="uk-container uk-container-large">
				<div class="uk-width-1-2@m uk-margin-auto uk-margin-medium-top uk-text-small">
					<div>
						You can provide feedback via <a href="https://trello.com/b/o1tEJ3rN/openaire-research-graph" target="_blank">Trello</a> or via opening a ticket in the <a href="https://www.openaire.eu/support/helpdesk" target="_blank">OpenAIRE Helpdesk</a> under the category OpenAIRE Services with the subject “OpenAIRE Research Graph: ”. The graph can be explored and tested via this portal or via data dumps made available in <a href="https://zenodo.org/communities/openaire-research-graph?page=1&size=20" target="_blank">Zenodo.org</a>.
					</div>
					<div class="uk-margin-top">
						Find information about the OpenAIRE Research Graph, how to test it and contribute to improving it on our <a href="https://www.openaire.eu/blogs/the-openaire-research-graph" target="_blank">blog</a>. You can also write to <a href="mailto:paolo.manghi@isti.cnr.it">Paolo Manghi</a>, the OpenAIRE Technical Director, for additional details.
					</div>
					<div class="uk-margin-medium-top uk-flex uk-flex-middle uk-flex-between uk-text-uppercase">
						<a href="https://www.openaire.eu/blogs/the-openaire-research-graph" target="_blank" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
							Instructions on providing feedback
						</a>
						<a href="https://trello.com/b/o1tEJ3rN/openaire-research-graph" target="_blank"
							class="uk-button trello-button-blue uk-text-uppercase">
							<img src="../../assets/explore-assets/trello.svg" alt="Trello logo" loading="lazy" class="uk-margin-small-top uk-margin-small-bottom">
							<span class="uk-margin-small-left">Go to Trello</span>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="uk-section uk-section-large">
		<div class="uk-container uk-container-large">
			<h2 class="uk-h1 uk-margin-medium-bottom">
				Have more questions<span class="uk-text-primary">?</span>
			</h2>
			<div id="custom-links" class="uk-padding uk-grid uk-child-width-1-2@m uk-text-bold" uk-grid uk-height-match="target: .link-title;">
				<div>
					<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
						<a href="https://www.openaire.eu/os-primers" target="_blank" class="uk-link-reset uk-text-large uk-flex uk-flex-middle uk-flex-between">
							<span class="link-title">Open science policies and how to align</span>
							<icon name="east" ratio="1.5"></icon>
						</a>
					</div>
				</div>
				<div>
					<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
						<a href="https://www.openaire.eu/rdm-handbook" target="_blank" class="uk-link-reset uk-text-large uk-flex uk-flex-middle uk-flex-between">
							<span class="link-title">How to manage your data in the open <br> science era</span>
							<icon name="east" ratio="1.5"></icon>
						</a>
					</div>
				</div>
				<div>
					<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
						<a href="https://www.openaire.eu/guides" target="_blank" class="uk-link-reset uk-text-large uk-flex uk-flex-middle uk-flex-between">
							<span class="link-title">How to use OpenAIRE to best serve <br> your needs</span>
							<icon name="east" ratio="1.5"></icon>
						</a>
					</div>
				</div>
				<div>
					<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
						<a href="https://www.openaire.eu/frontpage/webinars" target="_blank" class="uk-link-reset uk-text-large uk-flex-middle uk-flex uk-flex-between">
							<span class="link-title">Training material on a variety of <br> related topics</span>
							<icon name="east" ratio="1.5"></icon>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="uk-section">
		<div class="uk-container uk-container-large uk-margin-large-bottom uk-text-center">
			<h3 class="uk-h2">
				Need more information? <br> Get in touch and let us help you<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"
				href="https://www.openaire.eu/contact-us" target="_blank">Contact us</a>
		</div>
	</div>
</div>

<!-- Redesign END -->



<!-- <ng-template #_logos let-logo="logo" let-class="class">
  <div *ngIf="logo" [class]="'uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal '+class">
    <div class="">
      <img src="assets/ExploreLogos/{{logo}}" alt="{{logo}} logo" loading="lazy" width="112px" height="44px">
    </div>
  </div>
</ng-template>
<div class="image-front-topbar mainPageSearchForm">
  <div class="uk-section">
    <div class="uk-container uk-container-large uk-flex uk-flex-center">
      <div class="uk-width-xlarge@l uk-width-large uk-child-width-1-1">
          <advanced-search-input [class.uk-hidden]="entities.disableSelect" (searchEmitter)="goTo(true)">
            <entities-selection #entities [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
                                (selectionChange)="entityChanged($event)"
                                [onChangeNavigate]="false"></entities-selection>
            <div input placeholder="Scholary works" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
          </advanced-search-input>
      </div>
    </div>
    <div class="uk-margin-medium">
      <div class="uk-container uk-container-large explore-numbers uk-margin-medium-bottom">
        <div class="search_box_bg uk-grid uk-grid-stack" uk-grid="">
          <div class="uk-width-1-1@m uk-first-column">
            <div class="uk-grid uk-margin uk-margin-bottom uk-width-xxlarge uk-margin-auto">
              <div class="uk-width-expand uk-padding-remove">

                <div uk-slider="autoplay: false; autoplay-interval: 2500" class="uk-margin-top">
                  <div class="uk-position-relative">
                    <div class="uk-slider-container">
                      <ul class="uk-slider-items" uk-height-match="target: > li > div > div > .logo1; row: false;">
                        <ng-container *ngFor="let type of getKeys(logos)">
                          <li *ngFor="let range of createRange(logos[type].length) let j=index"
                              class="uk-width-1-1 home-logo">
                            <h1 class="uk-text-center uk-margin-bottom portal-color uk-h3">
                                <span *ngIf="type=='publication' && showPublications && numbers?.publicationsSize">
                                  <span
                                      class="uk-text-bold">{{numbers.publicationsSize.number|number}}{{numbers.publicationsSize.size}}
                                    publications</span><span> deduplicated</span>
                                </span>
                              <span
                                  *ngIf="type=='dataset' && showDatasets && (numbers?.datasetsLinkedSize || numbers?.datasetsSize)">
                                  <span *ngIf="numbers?.datasetsLinkedSize">
                                       <span
                                           class="uk-text-bold">{{numbers.datasetsLinkedSize.number|number}}{{numbers.datasetsLinkedSize.size}}
                                         datasets</span> interlinked with publications</span>
                                  <span *ngIf="numbers?.datasetsSize && !numbers?.datasetsLinkedSize"
                                        class="uk-text-bold">{{numbers.datasetsSize.number|number}}{{numbers.datasetsSize.size}}
                                    research data</span>
                                </span>
                              <span
                                  *ngIf="type=='software' && showSoftware && (numbers?.softwareSize || numbers?.softwareLinkedSize)">
                                  <span *ngIf="numbers?.softwareLinkedSize">
                                    <span
                                        class="uk-text-bol ">{{numbers.softwareLinkedSize.number|number}}{{numbers.softwareLinkedSize.size}}
                                      research
                                      software</span>  interlinked with publications</span>
                                  <span *ngIf="numbers?.softwareSize && !numbers?.softwareLinkedSize"
                                        class="uk-text-bold">{{numbers.softwareSize.number|number}}{{numbers.softwareSize.size}}
                                    research software</span>
                                </span>
                              <span *ngIf="type=='persistent'">
                                  <span>Persistent identifiers and registries</span>
                                </span>
                              <span *ngIf="type=='funder' && showProjects && numbers?.fundersSize && numbers?.projectsSize">
                                  <span
                                      class="uk-text-bold">{{numbers.fundersSize.number|number}}{{numbers.fundersSize.size}}
                                    funders</span><span> and</span>
                                  <span
                                      class="uk-text-bold"> {{numbers.projectsSize.number|number}}{{numbers.projectsSize.size}}
                                    funded grants</span>
                                </span>

                            </h1>
                            <div
                                class="uk-grid-small  uk-child-width-1-6 uk-text-center grid uk-flex uk-flex-center"
                                uk-grid uk-height-match="target: > div > .logo2; row: false;">
                              <div
                                  *ngFor="let logo of logos[type][j].slice(0,ceil(logos[type][j].length/2)); let i=index">
                                <ng-container
                                    *ngTemplateOutlet="_logos; context: { logo: logo, class: 'logo1 '}"></ng-container>
                                <ng-container
                                    *ngTemplateOutlet="_logos; context: { logo: logos[type][j][ceil(logos[type][j].length/2)+i], class: 'uk-margin-top logo2 '}"></ng-container>
                              </div>
                            </div>
                          </li>
                        </ng-container>
                      </ul>
                    </div>

                    <div class="uk-hidden@s">
                      <a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous
                         uk-slider-item="previous"><span class="visually-hidden">prev</span></a>
                      <a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next
                         uk-slider-item="next"><span class="visually-hidden">next</span></a>
                    </div>

                    <div class="uk-visible@s">
                      <a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous
                         uk-slider-item="previous"><span class="visually-hidden">prev</span></a>
                      <a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next
                         uk-slider-item="next"><span class="visually-hidden">next</span></a>
                    </div>
                  </div>
                </div>

              </div>
            </div>

          </div>
        </div>
      </div>
      <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
              [texts]="pageContents['top']"></helper>
    </div>
  </div>
</div>
<div *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
     class="uk-section graph-background">
  <div class="uk-container">
    <div class="uk-flex uk-flex-top uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
      <div class="uk-flex-last@m">
        <div [class.lines-10]="!readMore" class="uk-margin-bottom multi-line-ellipsis">
          <helper [texts]="pageContents['right']"></helper>
        </div>
        <div *ngIf="!readMore" class="uk-text-center clickable" (click)="readMore = true">
          <span>Read more<span class="space" uk-icon="chevron-down"></span></span>
        </div>
        <div *ngIf="readMore" class="uk-text-center clickable" (click)="readMore = false">
          <span>Read less<span class="space" uk-icon="chevron-up"></span></span>
        </div>
      </div>
      <div class="uk-flex uk-flex-bottom">
        <div class="uk-width-1-3 uk-width-1-2@m">
          <img src="assets/explore-assets/graph.png" alt="graph image" loading="lazy">
        </div>
        <div class="uk-padding uk-width-1-2">
          <img src="assets/common-assets/logo-large-graph.png" alt="graph image" loading="lazy">
        </div>
      </div>
    </div>
  </div>
</div>
<div *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
     class="graph-background-bottom uk-section uk-padding-remove-vertical uk-background-cover"></div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
        [texts]="pageContents['bottom']"></helper>
<div class="uk-section uk-padding-remove-bottom">
  <h3 class="uk-text-center uk-margin-medium-bottom">Our growing <span class="uk-text-bold">Community</span></h3>
  <numbers #numbersComponent [defaultInit]="false" backgroundClass="numbers-background"
           (results)="numbers = $event"></numbers>
</div>
<div class="uk-section uk-padding-large uk-grid uk-child-width-1-2@m uk-child-width-1-1@s  uk-margin-large-top uk-margin-large-bottom">
  <div class="uk-flex uk-flex-middle uk-flex-center">
    <h3 class="uk-text-center uk-margin-medium-bottom">Start browsing by subject</h3>
  </div>
  <div>
    <div class="uk-text-center uk-padding-large uk-padding-remove-vertical ">
      <span *ngFor="let subject of specialSubjects " class=" uk-text-capitalize uk-link-reset uk-button uk-button-default uk-button-secondary uk-margin-small-right uk-margin-small-bottom">
      <a [routerLink]=" properties.searchLinkToAdvancedResults"
         [queryParams]="getSubjectParameter(subject.value)  ">{{subject.label}}</a></span>
    </div>
  </div>
</div>

<helper *ngIf="pageContents && pageContents['left'] && pageContents['left'].length > 0"
        [texts]="pageContents['left']"></helper>
<div class="uk-section-muted"
     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
  <div class="uk-container uk-container-large">
    <other-portals portal="explore" [properties]="properties"></other-portals>
  </div>
</div> -->
