eosc-explore/src/app/home/home.component.html

<div class="image-front-topbar">
<!--  <div class="uk-section mainPageSearchForm">
    <div class="">
      <div class="search_box_bg ">
        <div id="searchForm" class="uk-grid  uk-flex uk-flex-center">
          <div id="searchImage" class="uk-margin-small-top "></div>
          <form class="uk-margin ">
            <div class="uk-grid uk-margin-small-left">
              <div class="uk-margin-small-top uk-padding-remove-left">
                <entities-selection [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
                                    [onChangeNavigate]="false"
                                    (selectionChange)="entityChanged($event)" [customFilter]="customFilter"
                ></entities-selection>
              </div>
              <div class=" uk-padding-remove-left uk-margin-small-top">
                <div class="uk-inline">
                  <a *ngIf="keyword.length > 0" class="uk-form-icon uk-form-icon-flip" (click)="keyword = ''"
                     uk-icon="icon: close"></a>
                  <input type="text" class="uk-input   uk-width-xlarge@l uk-width-large@m uk-width-medium"
                         placeholder="Search in OpenAIRE for scholarly works"
                         [(ngModel)]="keyword"
                         name="keyword">
                </div>
                <div class=" quickSelectionsBox uk-width-xlarge@l uk-width-large@m uk-width-medium">
                  <quick-selections *ngIf="selectedEntity == 'result'" [resultTypes]="resultTypes"
                                    [quickFilter]="resultsQuickFilter"
                                    [properties]="properties">
                  </quick-selections>
                </div>
              </div>
              <div class="uk-padding-remove-left uk-margin-small-top">

                <button (click)="goTo(true)" type="submit"
                        class="uk-button portal-button uk-text-bold  uk-padding uk-padding-remove-vertical uk-margin-small-left">
                  Search
                </button>
                <div class="uk-margin-small-top  uk-margin-left">
                  &lt;!&ndash;                        (click)="goTo(false)"&ndash;&gt;
                  <a *ngIf="selectedEntity!='all'" (click)="goTo(false)" class="portal-link">Advanced Search</a>
                  <a *ngIf="selectedEntity=='all'" class="portal-link ">Advanced Search</a></div>
                <div *ngIf="selectedEntity=='all'" uk-dropdown class="uk-dropdown default-dropdown">
                  <ul class="uk-list uk-margin-remove-bottom">
                    <li *ngIf="showSoftware || showPublications || showOrp || showDatasets"><a
                        [routerLink]="properties.searchLinkToAdvancedResults"
                        [queryParams]="getQueryParamsForAdvancedSearch('result')"
                    >Research
                      outcomes</a></li>
                    <li *ngIf="showProjects"><a
                        [routerLink]="properties.searchLinkToAdvancedProjects"
                        [queryParams]="getQueryParamsForAdvancedSearch('project')">
                      Projects</a></li>
                    <li *ngIf="showDataProviders"><a
                        [routerLink]="properties.searchLinkToAdvancedDataProviders"
                        [queryParams]="getQueryParamsForAdvancedSearch('datasource')">
                      Content providers</a></li>
                    <li *ngIf="showOrganizations"><a
                        [routerLink]="properties.searchLinkToAdvancedOrganizations"
                        [queryParams]="getQueryParamsForAdvancedSearch('organization')">
                      Organizations</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>-->
  <div class="uk-section uk-margin-large-left uk-padding-remove-bottom uk-grd uk-flex uk-overflow-hidden home-background">
<!--    <div id="searchImage" class="uk-margin-medium-top uk-margin-small-right "></div>-->
    <div class="uk-grid uk-width-1-1 uk-margin-bottom uk-height-medium">
      <div class="uk-width-1-1 uk-width-auto@m uk-margin-medium-top"><div id="searchImage"></div></div>
      <div class="uk-width-expand search_box_bg" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">

          <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 *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>

  </div>
</div>
<div *ngIf="aggregatorId == 'eosc'" class="uk-grid uk-child-width-1-2@m uk-child-width-1-1@s">
  <div>
    <div class="uk-margin-large-left">
      <h1 class=" uk-text-bold">Welcome to EOSC research discovery portal!</h1>
      <div class="uk-margin-large-top uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a 
        ligula ante. Interdum et malesuada 
        fames ac ante ipsum primis in faucibus. Vivamus vitae sagittis metus, eget fringilla lectus. Sed sit amet nisi odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut sed diam sem. Phasellus fermentum vulputate mi, non mollis sem dictum ut. Ut quis vestibulum mauris. </div>
    </div>
  </div>
  <img src="https://marketplace.eosc-portal.eu/packs/media/images/gfx_whole_illustation_desktop-fc94d4f7e15455d1785ef4793e1573fb.png">
  
  
</div>
<div class="uk-section graph-background" *ngIf="aggregator.graphSectionText && aggregator.graphSectionTitle">
  <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">
          <div class="uk-h3">{{aggregator.graphSectionTitle}}</div>
          <p [innerHtml]="aggregator.graphSectionText">
          </p>
        </div>
        <div *ngIf="aggregator.graphSectionText">
          <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>
      <div class="uk-flex uk-flex-bottom">
        <div class="uk-width-1-3 uk-width-1-2@m">
          <img src="assets/graph.svg">
        </div>
        <div class="uk-padding uk-width-1-2">
          <img src="assets/common-assets/logo-large-graph.png">
        </div>
      </div>
    </div>
  </div>
</div>
<ng-container *ngIf="this.customFilter && this.customFilter.valueId == 'CA'">
  <!-- Funders Cards -->
  <div *ngIf="  funders.length" class="uk-section uk-padding-remove-bottom"   style="background: linear-gradient(180deg, #FAFAFA 50%, #FFFFFF 55%);">
  <h3 class="uk-text-center uk-margin-medium-bottom">Our Canadian <span class="uk-text-bold">Funders</span></h3>
  <!-- TODO: individual component -->
  <div class="uk-section uk-container uk-container-large">
    <div class="uk-grid uk-child-width-1-3" uk-grid uk-height-match="target: > div > .uk-card">
      <div *ngFor="let funder of funders">
        <div [routerLink]="properties.searchLinkToResults" [queryParams]="funder.params" class="uk-card uk-card-default uk-card-body uk-text-center uk-link">
          <div class="uk-margin-bottom">
            <img *ngIf="funder.logo" src={{funder.logo}} style="max-height: 80px;">
          </div>
          <div class="uk-margin-bottom">
            <div class="uk-text-large">{{funder.name}}</div>
          </div>
          <div class="uk-margin-bottom">
            <h5 class="uk-text-bold uk-margin-remove uk-link number">{{funder.publications | number}}</h5> research outcomes found
          </div>
          <div>
            <h5 class="uk-text-bold uk-margin-remove uk-link number">{{(funder.openAccessPublications / funder.publications) * 100 | number : '1.0-0'}}%</h5> Open Access
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</ng-container>
<div class="uk-section uk-padding-remove-bottom " [class.uk-hidden]="!( this.customFilter && 
this.customFilter.valueId == 'CA')">
  <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"></numbers>
</div>
<div class="uk-section" *ngIf="isRouteAvailable('participate/deposit/learn-how') || isRouteAvailable('participate/claim')">
  <div class="uk-padding uk-padding-remove-horizontal">
    <div class="uk-container uk-container-small">
      <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
        <div class="uk-width-1-1@m uk-first-column">
          <div
              class="uk-margin uk-text-center uk-child-width-1-1 uk-grid-match uk-child-width-1-1@s uk-child-width-1-2@m uk-child-width-1-2@l uk-grid"
              id="page#8" uk-grid="" uk-height-match="target: .target">
            <div class="uk-first-column" *ngIf="isRouteAvailable('participate/deposit/learn-how')">
              <div class="el-item uk-card uk-card-default uk-card-medium uk-card-body">
                <div class="uk-text-center target"><img alt="Share" class="uk-width-1-3@m uk-width-small"
                                                        src="assets/share.svg"></div>

                <div class="el-content uk-margin uk-text-large"><span class="uk-text-bold">Deposit</span> your research
                </div>

                <div class="uk-margin-small-top uk-text-left card-text uk-flex uk-flex-center">
                  <div class="uk-margin-left uk-margin-right">Deposit in a repository of your choice.<br>
                    Select an OpenAIRE compatible<br>
                    repository (2.0 +) so that your research is linked to your funding information. Use Zenodo, a
                    catch-all repository hosted by CERN to deposit all your research results (publications, data,
                    software, etc.)
                  </div>
                </div>
                <a class="uk-button portal-button uk-padding uk-padding-remove-vertical uk-margin-small-left ng-star-inserted uk-margin uk-margin-bottom uk-width-1-2"
                   href="/participate/deposit/learn-how" type="submit">Deposit </a></div>
            </div>

            <div *ngIf=" isRouteAvailable('participate/claim')">
              <div class="el-item uk-card uk-card-default uk-card-medium uk-card-body">
                <div class="uk-text-center target"><img alt="Share" class="uk-width-1-3@m uk-width-small"
                                                        src="assets/link.svg"></div>

                <div class="el-content uk-margin uk-text-large"><span class="uk-text-bold">Link</span> your work</div>

                <div class="uk-margin-small-top uk-text-left card-text uk-flex uk-flex-center">
                  <div class="uk-margin-left uk-margin-right">Connect all your research.<br>
                    If you can't find your research results in OpenAIRE, don't worry! Use our Link Out service , that
                    reaches out to many<br>
                    external sources via APIs, to connect<br>
                    your research results and claim them to your project.
                  </div>
                </div>
                <a class="uk-button portal-button uk-padding uk-padding-remove-vertical uk-margin-small-left ng-star-inserted uk-margin uk-margin-bottom uk-width-1-2"
                   href="/participate/claim" type="submit">Link </a></div>
            </div>
          </div>
        </div>
      </div>
    </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>-->