connect/src/app/communities/communities.component.html

<div>
<!--     style="background: transparent linear-gradient(0deg, #FAFAFA 23%, #E2EEFA 30%)">-->
  <div class="uk-section
              uk-background-fixed uk-background-bottom-right uk-background-norepeat
              homeBackgroundImage"
       style="background: #fff;">
    <div class="uk-container uk-container-large">
      <div class="uk-grid">
        <div>
          <h1 class="uk-heading-large">
            <span class="">Build a </span><span class="uk-text-primary">Gateway</span>
            <br/><span class=""> for your<br/>Community</span><span class="uk-text-primary">.</span>
          </h1>
          <ul class="uk-text-large uk-list uk-margin-medium-top">
            <li>Turn Open Science into Practice.</li>
            <li>It takes your open and linked research outcomes.</li>
            <li>A service customized to your needs.</li>
          </ul>
          <div class="uk-inline uk-margin-top">
            <a class="uk-button uk-button-primary" routerLink="/about/learn-how">LEARN MORE</a>
          </div>
        </div>
<!--        <div class="uk-width-expand"></div>-->
<!--        uk-parallax="viewport: -5.5;"-->
<!--        <div class="uk-width-expand uk-position-fixed uk-position-bottom-right" uk-parallax="y: 0; easing: 0.8">-->
<!--        <div class="uk-width-expand" uk-parallax="y: 800; easing: 0.8-->
<!--        <div class="uk-width-expand" uk-parallax="bgy: 500">-->
<!--          <img src="assets/connect-assets/home/connect_long_image.png"/>-->
<!--&lt;!&ndash;          <img src="assets/connect-assets/home/connect_long_image.png" style="transform: translateY(0px);" class="" uk-parallax="y: 1000; easing: 0.8">&ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
      </div>
    </div>
  </div>
  <div *ngIf="researchCommunities.length === 0" class="uk-container uk-container-large uk-margin-large-bottom">
    <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
  </div>
<!--  uk-margin-large-top-->
  <div *ngIf="!loading && researchCommunities.length > 0" class="uk-section uk-container uk-container-large">
<!--    uk-margin-medium-top-->
    <h2 class="uk-h1">Community Gateways <br/> already in action<span class="uk-text-primary">.</span></h2>
    <div class="uk-margin-large-top uk-margin-large-bottom">
      <div class="uk-visible@xl">
        <div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid>
          <div *ngFor="let community of researchCommunities.slice(0, 4); let i = index">
            <div class="uk-card uk-card-default uk-card-hover">
              <browse-community [community]=community></browse-community>
            </div>
          </div>
        </div>
        <div class="uk-text-center uk-margin-medium-top">
          <a *ngIf="researchCommunities.length > 4"
             class="uk-display-inline-block uk-text-uppercase uk-button-text"
             routerLinkActive="router-link-active" routerLink="/search/find/communities">
            <span class="uk-flex uk-flex-middle">
              <span>View All</span>
            </span>
          </a>
        </div>
      </div>

      <div class="uk-hidden@xl">
        <div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid>
          <div *ngFor="let community of researchCommunities.slice(0, 3); let i = index">
            <div class="uk-card uk-card-default uk-card-hover">
              <browse-community [community]=community></browse-community>
            </div>
          </div>
        </div>
        <div class="uk-text-center uk-margin-medium-top">
          <a *ngIf="researchCommunities.length > 3"
             class="uk-display-inline-block uk-text-uppercase uk-button-text"
             routerLinkActive="router-link-active" routerLink="/search/find/communities">
            <span class="uk-flex uk-flex-middle">
              <span>View All</span>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="">
<!--    uk-margin-large-top-->
    <section-scroll [customClass]="'uk-section uk-section-secondary uk-padding-remove-bottom '"
                    [childrenCustomClass]="' uk-container uk-container-large '">
      <div top class="uk-width-1-1 uk-background-secondary">
        <div class="top-content uk-container uk-container-large">
          <h2 class="uk-h6 uk-text-primary">Benefits</h2>
          <h1 class="uk-h1 uk-margin-remove-top">Find the best <br/> for your community<span class="uk-text-primary">.</span></h1>
        </div>
      </div>
      <div left class="uk-width-1-1 uk-width-1-2@m"
           uk-scrollspy="target: > img; cls: uk-animation-slide-bottom-medium; repeat: true">
        <div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 1">
          <img id="imgId1" alt="img1" src="assets/connect-assets/home/repository.png"/>
        </div>
        <div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0">
          <img id="imgId2" alt="img2" src="assets/connect-assets/home/link.png"/>
        </div>
        <div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0">
          <img id="imgId3" alt="img3" src="assets/connect-assets/home/overview.png"/>
        </div>
        <div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0">
          <img id="imgId4" alt="img4" src="assets/connect-assets/home/browse.png"/>
        </div>
        <div class="imgContainer uk-flex uk-flex-middle uk-flex-center" style="opacity: 0">
          <img id="imgId5" alt="img5" src="assets/connect-assets/home/statistics.png"/>
        </div>
      </div>
      <div scroll class="uk-width-expand">
        <div class="uk-background-secondary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
          <h2 id="1st" class="uk-h2" name="txt">
            <span class="uk-text-primary">Find a repository to <br/>deposit </span>
            <span>your research <br/>outcome</span>
            <span class="uk-text-primary">.</span>
          </h2>
        </div>
        <div class="uk-background-secondary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
          <h2 id="2nd" class="uk-h2" name="txt">
            <span class="uk-text-primary">Link your research <br/>output </span>
            <span>with your <br/>community, funding,<br/> and other research<br/> products</span>
            <span class="uk-text-primary">.</span>
          </h2>
        </div>
        <div class="uk-background-secondary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
          <h2 id="3rd" class="uk-h2" name="txt">
            <span>View community's<br/> </span>
            <span class="uk-text-primary">overview at a glance.</span>
          </h2>
        </div>
        <div class="uk-background-secondary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
          <h2 id="4th" class="uk-h2" name="txt">
            <span class="uk-text-primary">Search & browse </span>
            <span>your<br/> community's research<br/> products</span>
            <span class="uk-text-primary">.</span>
          </h2>
        </div>
        <div class="uk-background-secondary uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
          <h2 id="5th" class="uk-h2" name="txt">
            <span class="uk-text-primary">View statistics </span>
            <span>for<br/> your community's<br/> research products</span>
            <span class="uk-text-primary">.</span>
          </h2>
        </div>
      </div>
    </section-scroll>
  </div>

<!--  uk-margin-large-top-->
  <div   class="uk-section uk-container uk-container-large">
  <div class="">
<!--    uk-margin-medium-top-->
    <h2 class="uk-h2">Our mission for an <br/> Open and FAIR science<span class="uk-text-primary">.</span></h2>
    <div class="uk-margin-large-top">
      <div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-large uk-grid-match uk-grid" uk-grid=""
           uk-height-match=".target">
        <div class="uk-first-column">
          <div class="uk-card uk-card-default uk-padding">
            <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center
                        uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
              <div>
                <img src="assets/connect-assets/home/virtual.svg" alt="A Virtual Research Environment" style="height:60px; width:67px"/>
              </div>
            </div>
            <div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
              <div class="target uk-text-center">
                <h3 class="uk-6 uk-card-title uk-margin-small-bottom">A Virtual Research Environment</h3>
                <div>An overlay platform making it easy to share, link, disseminate and monitor all your publications,
                  data, software, methods. In one place.
                </div>
              </div>
              <hr/>
              <div>
                <ul class="uk-list uk-text-small">
<!--                  <li>-->
<!--                    <div class="uk-margin-small-right uk-icon uk-text-primary" uk-icon="check">-->
<!--                      <svg data-svg="check" height="20" viewbox="0 0 20 20" width="20"-->
<!--                           xmlns="http://www.w3.org/2000/svg">-->
<!--                        <polyline fill="none" points="4,10 8,15 17,4" stroke="#000" stroke-width="1.1"></polyline>-->
<!--                      </svg>-->
<!--                    </div>-->
                  <li class="uk-flex uk-flex-middle">
                    <icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
                    Access to OpenAIRE research graph
                  </li>
                  <li class="uk-flex uk-flex-middle">
                    <icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
                    Moderated, front-end linking
                  </li>
                  <li class="uk-flex uk-flex-middle">
                    <icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
                    Cross-platform search
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="uk-card uk-card-default uk-padding">
            <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center
                        uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
              <div>
                <img src="assets/connect-assets/home/open_science.svg" alt="Open science in action" style="height:60px; width:67px"/>
              </div>
            </div>
            <div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
              <div class="target uk-text-center" style="">
                <h3 class="uk-h6 uk-card-title uk-margin-small-bottom">Open Science in action</h3>
                <div>A time-saving bundle of services for researchers to effortlessly practice open science. An integral
                  part of the&nbsp;European Open Science Cloud.
                </div>
              </div>
              <hr>
              <div>
                <ul class="uk-list uk-text-small">
                  <li class="uk-flex uk-flex-middle">
                    <icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
                    Use of OpenAIRE Guidelines
                  </li>
                  <li class="uk-flex uk-flex-middle">
                    <icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
                    Publish and get DOIs with Zenodo
                  </li>
                  <li class="uk-flex uk-flex-middle">
                    <icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
                    EOSC Single Sign-On
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="uk-card uk-card-default uk-padding">
            <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center
                        uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
              <div>
                <img src="assets/connect-assets/home/customize.svg" alt="Customized to your needs" style="height:60px; width:67px"/>
              </div>
            </div>
            <div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
              <div class="target uk-text-center" style="">
                <h3 class="uk-h6 uk-card-title uk-margin-small-bottom">Customized to your needs</h3>
                <div>A Gateway with your own brand, rules for aggregation, text &amp; data mining, and presentation. Run
                  by you via a simple, yet powerful backend administration tool.
                </div>
              </div>
              <hr>
              <div>
                <ul class="uk-list uk-text-small">
                  <li class="uk-flex uk-flex-middle">
                    <icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
                    Access control
                  </li>
                  <li class="uk-flex uk-flex-middle">
                    <icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
                    Analytics: rich set of indicators
                  </li>
                  <li class="uk-flex uk-flex-middle">
                    <icon class="uk-margin-small-right uk-text-primary" name="done" ratio="0.85" flex="true"></icon>
                    Look &amp; feel to match your brand
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--<div class="uk-section uk-container uk-container-large">-->
<!--  <div class="uk-padding-small">-->
<!--    <div class="uk-slider"-->
<!--         uk-slider="velocity: 0;autoplay: true;autoplay-interval: 4000;pause-on-hover: false;center: true">-->
<!--      <div class="uk-slider-container">-->
<!--        <ul class="uk-slider-items uk-child-width-1-1" style="transform: translate3d(0px, 0px, 0px);">-->
<!--          <li class="ng-star-inserted uk-active" tabindex="-1">-->
<!--            <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">-->
<!--              <div class="uk-first-column">-->
<!--                <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/deposit.gif"/>-->
<!--              </div>-->
<!--              <div class="uk-margin-top">-->
<!--                <div>-->
<!--                  <h4 class="">Find a repository to deposit your research outcome</h4>-->
<!--                  <div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research-->
<!--                    communities, both established and emerging ones. Our service helps you reach out and engage all your-->
<!--                    researchers to practice open science out-of-the-box.-->
<!--                  </div>-->
<!--                  <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
<!--                                            routerLink="/about/learn-how">learn more</a></div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </li>-->
<!--          <li tabindex="-1">-->
<!--            <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">-->
<!--              <div class="uk-first-column">-->
<!--                <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/link.gif"/>-->
<!--              </div>-->
<!--              <div class="uk-margin-top">-->
<!--                <div>-->
<!--                  <h4 class="">Link your research output with your community, funding, and other research-->
<!--                    products</h4>-->
<!--                  <div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research-->
<!--                    communities, both established and emerging ones. Our service helps you reach out and engage all your-->
<!--                    researchers to practice open science out-of-the-box.-->
<!--                  </div>-->
<!--                  <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
<!--                                            routerLink="/about/learn-how">learn more</a></div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </li>-->
<!--          <li tabindex="-1">-->
<!--            <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">-->
<!--              <div class="uk-first-column">-->
<!--                <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/overview.gif"/>-->
<!--              </div>-->
<!--              <div class="uk-margin-top">-->
<!--                <div>-->
<!--                  <h4 class="">View community&#39;s overview at a glance</h4>-->
<!--                  <div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research-->
<!--                    communities, both established and emerging ones. Our service helps you reach out and engage all your-->
<!--                    researchers to practice open science out-of-the-box.-->
<!--                  </div>-->
<!--                  <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
<!--                                            routerLink="/about/learn-how">learn more</a></div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </li>-->
<!--          <li tabindex="-1">-->
<!--            <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">-->
<!--              <div class="uk-first-column">-->
<!--                <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/home/gifs/results.gif"/>-->
<!--              </div>-->
<!--              <div class="uk-margin-top">-->
<!--                <div>-->
<!--                  <h4 class="">Search &amp; browse your community&#39;s research products.</h4>-->
<!--                  <div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research-->
<!--                    communities, both established and emerging ones. Our service helps you reach out and engage all your-->
<!--                    researchers to practice open science out-of-the-box.-->
<!--                  </div>-->
<!--                  <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
<!--                                            routerLink="/about/learn-how">learn more</a></div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </li>-->
<!--          <li tabindex="-1">-->
<!--            <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">-->
<!--              <div class="uk-first-column">-->
<!--                <img class="uk-border-rounded uk-box-shadow-large"-->
<!--                     src="assets/connect-assets/home/gifs/graph-analysis.gif"/>-->
<!--              </div>-->
<!--              <div class="uk-margin-top">-->
<!--                <div>-->
<!--                  <h4 class="">View statistics for your community&#39;s research products.</h4>-->
<!--                  <div class="uk-margin-medium">This is OpenAIRE&rsquo;s key service for research-->
<!--                    communities, both established and emerging ones. Our service helps you reach out and engage all your-->
<!--                    researchers to practice open science out-of-the-box.-->
<!--                  </div>-->
<!--                  <div class="uk-inline"><a class="uk-button portal-button uk-text-uppercase"-->
<!--                                            routerLink="/about/learn-how">learn more</a></div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </li>-->
<!--        </ul>-->
<!--        <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin">-->
<!--&lt;!&ndash;          <li class="uk-active" uk-slider-item="0"></li>&ndash;&gt;-->
<!--&lt;!&ndash;          <li uk-slider-item="1"></li>&ndash;&gt;-->
<!--&lt;!&ndash;          <li uk-slider-item="2"></li>&ndash;&gt;-->
<!--&lt;!&ndash;          <li uk-slider-item="3"></li>&ndash;&gt;-->
<!--&lt;!&ndash;          <li uk-slider-item="4"></li>&ndash;&gt;-->
<!--        </ul>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->
<!--<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
        [texts]="pageContents['bottom']"></helper>-->
<!--<div class="uk-section" style="background-color: #D9D8E8;">-->
<div #contact class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<!--  uk-margin-medium-top-->
        <h2 class="uk-h2">
          Let us Help you Develop a<br/>Collaborative Science<br/>
          Gateway<span class="uk-text-primary">.</span>
          It is fast<span class="uk-text-primary">.</span> It is reliable<span class="uk-text-primary">.</span>
        </h2>
        <a class="uk-button uk-button-primary uk-margin-medium-top uk-margin-medium-bottom" routerLink="/contact-us">CONTACT US</a>
  </div>
</div>
<!--<div class="uk-section-muted">-->
<!--  <div class="uk-container uk-container-large">-->
<!--    <other-portals [properties]="properties"></other-portals>-->
<!--  </div>-->
<!--</div>-->