monitor/src/app/get-started/get-started.component.html

127 lines
7.4 KiB
HTML

<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
<div class="uk-visible@m">
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-margin-small-top uk-text-center uk-flex uk-flex-middle uk-child-width-1-1 uk-flex-column">
<h1 class="uk-width-3-4@m" uk-scrollspy-class>Get started with <br> OpenAIRE Monitor Dashboard <span class="uk-text-primary">.</span></h1>
<div class="uk-text-large uk-width-2-3@m" uk-scrollspy-class>
The OpenAIRE Monitor Dashboard is an <span class="uk-text-bold">open tracking platform</span> with all the tools you need
to understand and make insightful decisions — whether you are a <span class="uk-text-bold">funder</span>, a <span class="uk-text-bold">research initiative</span>
or a <span class="uk-text-bold">community</span>, and want to measure or increase uptake
of Open Science, understand your costs, gaps and strengths, or build a community around it.
</div>
</div>
<div class="uk-section uk-section-large uk-padding-remove-bottom" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-margin-auto uk-width-1-1 uk-width-3-4@l uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
<div class="uk-flex uk-flex-center uk-flex-top" uk-scrollspy-class>
<img class="uk-visible@m" src="assets/monitor-assets/get-started/1.svg" alt="Step 1" loading="lazy">
<div class="uk-flex uk-flex-column uk-padding-small uk-margin-small-left">
<icon name="description" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-background"></icon>
<span class="uk-h5 uk-margin-remove uk-text-uppercase">Provide some <br> information</span>
</div>
</div>
<div class="uk-flex uk-flex-center uk-flex-top" uk-scrollspy-class>
<img class="uk-visible@m" src="assets/monitor-assets/get-started/2.svg" alt="Step 2" loading="lazy">
<div class="uk-flex uk-flex-column uk-padding-small uk-margin-small-left">
<icon name="email" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-background"></icon>
<span class="uk-h5 uk-margin-remove uk-margin-small-top uk-text-uppercase">We contact <br> you</span>
</div>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-section-large">
<div class="uk-padding-small">
<h2 class="uk-h1 uk-text-center">Provide some information<span class="uk-text-primary">.</span></h2>
<div class="uk-flex uk-flex-center uk-width-1-1">
<div class="uk-width-1-2@m uk-width-1-1 uk-margin-large-top">
<contact-us [organizationTypes]="organizationTypes" [sending]="sending"
[contactForm]="contactForm" alignButton="center" (sendEmitter)="send($event)">
</contact-us>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section">
<div class="uk-grid uk-grid-large uk-flex-middle" uk-grid>
<div class="uk-width-1-2@m uk-width-1-1">
<div class="uk-padding-small">
<h2>Need more information?<br>View details on the process<span class="uk-text-primary">.</span></h2>
<a class="uk-display-inline-block uk-text-uppercase uk-button 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>
<div class="uk-width-expand uk-flex uk-flex-center">
<img src="assets/monitor-assets/get-started/steps.svg" loading="lazy">
</div>
</div>
</div>
</div>
<div class="uk-hidden@m">
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-text-center">
<h1 class="uk-heading-small uk-padding-small uk-padding-remove-vertical" uk-scrollspy-class>Get started with <br>OpenAIRE Monitor Dashboard<span class="uk-text-primary">.</span></h1>
<div class="uk-text-large uk-margin-large-top" uk-scrollspy-class>
The OpenAIRE Monitor Dashboard is an <span class="uk-text-bold">open tracking platform</span> with all the tools you need
to understand and make insightful decisions — whether you are a <span class="uk-text-bold">funder</span>, a <span class="uk-text-bold">research initiative</span>
or a <span class="uk-text-bold">community</span>, and want to measure or increase uptake
of Open Science, understand your costs, gaps and strengths, or build a community around it.
</div>
</div>
<div class="uk-section uk-section-large uk-padding-remove-bottom" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-flex uk-flex-column uk-flex-middle uk-text-center uk-padding-small uk-position-relative">
<img class="uk-position-absolute number-step number-step-1" src="assets/monitor-assets/get-started/1.svg" alt="Step 1" loading="lazy">
<icon name="description" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-background"></icon>
<span class="uk-h5 uk-margin-remove uk-text-uppercase">Provide some <br> information</span>
</div>
<div class="uk-flex uk-flex-column uk-flex-middle uk-text-center uk-padding-small uk-position-relative">
<img class="uk-position-absolute number-step number-step-2" src="assets/monitor-assets/get-started/2.svg" alt="Step 2" loading="lazy">
<icon name="email" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-background"></icon>
<span class="uk-h5 uk-margin-remove uk-margin-small-top uk-text-uppercase">We contact you</span>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-section-large">
<div class="uk-padding-small">
<h2 class="uk-heading-small uk-text-center">Provide some information<span class="uk-text-primary">.</span></h2>
<div class="uk-flex uk-flex-center uk-width-1-1">
<div class="uk-width-1-2@m uk-width-1-1 uk-margin-large-top">
<contact-us [organizationTypes]="organizationTypes" [sending]="sending"
[contactForm]="contactForm" alignButton="center" (sendEmitter)="send($event)">
</contact-us>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-column uk-flex-middle uk-text-center uk-padding uk-padding-remove-vertical">
<h2>Need more information?<br>View details on the process<span class="uk-text-primary">.</span></h2>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-large-top uk-margin-large-bottom"
routerLinkActive="router-link-active" routerLink="/about/learn-how">
<span class="uk-flex uk-flex-middle">
<span>Learn More</span>
</span>
</a>
<img src="assets/monitor-assets/get-started/steps.svg" loading="lazy">
</div>
</div>
</div>
<modal-alert #modal (alertOutput)="goToHome()">
<div class="uk-padding-small uk-padding-remove-horizontal">
Our team will respond to your submission soon.<br>
Press OK to redirect to OpenAIRE Monitor home page.
</div>
</modal-alert>