tethys.backend/resources/js/Components/FirstrunWizard/components/Page1.vue
Arno Kaimbacher c70fa4a0d8
Some checks failed
CI Pipeline / japa-tests (push) Failing after 53s
- aded npm packages @types/qrcode, qrcode and node-f2a
- corrected UsersController.ts and RoleController.ts with correct routes for settings
- added migration script and ui and Controller for 2 Factor Authentication
- npm updates
2023-12-29 15:54:49 +01:00

87 lines
2.8 KiB
Vue

<template>
<div id="page__wrapper" class="flex flex-col justify-between min-h-520">
<div class="page__scroller first-page">
<h2 id="page__heading" class="text-xl font-bold leading-tight dark:text-slate-400 text-center">
{{ 'A researchdata platform that puts you in control' }}
</h2>
<div class="page__content">
<!-- <Card :title="'Privacy'"
:subtitle="'Host your data and files where you decide.'">
<Lock :size="20" />
</Card>
<Card :title="'Productivity'"
:subtitle="'Collaborate and communicate across any platform.'">
<BriefcaseCheck :size="20" />
</Card> -->
<div class="h-fit box-border flex">
<div class="card__icon">
<BriefcaseCheck :size="20" />
</div>
<div>
Discover the power of TethysCloud, the cutting-edge web backend solution that revolutionizes the way you
handle
research
data. At the heart of Tethys lies our meticulously developed research data repository, which
leverages
state-of-the-art
CI/CD techniques to deliver a seamless and efficient experience.
</div>
</div>
<Card :title="'Interoperability'" :subtitle="'Import and export anything you want with open standards.'">
<SwapHorizontal :size="20" />
</Card>
<Card :title="'Community'" :subtitle="'Enjoy constant improvements from a thriving open-source community.'">
<AccountGroup :size="20" />
</Card>
</div>
</div>
</div>
</template>
<script lang="ts">
import Card from './Card.vue'
import SwapHorizontal from '@/Components/Icons/SwapHorizontal.vue';
import AccountGroup from '@/Components/Icons/AccountGroup.vue';
import BriefcaseCheck from '@/Components/Icons/BriefcaseCheck.vue'
export default {
name: 'Page1',
components: {
Card,
SwapHorizontal,
AccountGroup,
BriefcaseCheck
},
}
</script>
<style lang="css" scoped>
.page {
&__scroller {
/* overflow-y: scroll; */
margin-top: calc(var(--default-grid-baseline) * 8);
}
&__content {
display: flex;
flex-wrap: wrap;
gap: calc(var(--default-grid-baseline) * 6);
justify-content: center;
margin: calc(var(--default-grid-baseline) * 10) 0;
}
}
.card__icon {
display: flex;
flex: 0 0 44px;
align-items: center;
}
.first-page {
margin-top: 100px;
}
</style>