95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
<script setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<section class="page-shell">
|
|
<div class="page-header">
|
|
<div class="eyebrow">{{ t('integrations.eyebrow') }}</div>
|
|
<h1>{{ t('integrations.title') }}</h1>
|
|
<p>{{ t('integrations.description') }}</p>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<strong>{{ t('integrations.googleDrive.title') }}</strong>
|
|
<span>{{ t('integrations.googleDrive.description') }}</span>
|
|
</div>
|
|
|
|
<div class="placeholder-block">
|
|
<span>{{ t('integrations.statusLabel') }}</span>
|
|
<strong>{{ t('integrations.pendingTitle') }}</strong>
|
|
<small>{{ t('integrations.googleDrive.nextStep') }}</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<strong>{{ t('integrations.apiKeys.title') }}</strong>
|
|
<span>{{ t('integrations.apiKeys.description') }}</span>
|
|
</div>
|
|
|
|
<div class="placeholder-block">
|
|
<span>{{ t('integrations.statusLabel') }}</span>
|
|
<strong>{{ t('integrations.pendingTitle') }}</strong>
|
|
<small>{{ t('integrations.apiKeys.nextStep') }}</small>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page-shell {
|
|
@apply flex flex-col gap-6;
|
|
}
|
|
|
|
.eyebrow {
|
|
@apply text-xs font-bold uppercase tracking-[0.24em];
|
|
color: #0f766e;
|
|
}
|
|
|
|
.page-header h1 {
|
|
@apply mt-2 text-4xl font-black;
|
|
color: #172033;
|
|
}
|
|
|
|
.page-header p,
|
|
.panel-heading span,
|
|
.placeholder-block span,
|
|
.placeholder-block small {
|
|
@apply text-sm leading-6;
|
|
color: #526178;
|
|
}
|
|
|
|
.panel {
|
|
@apply flex flex-col gap-5 rounded-[1.75rem] border p-5;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-color: rgba(23, 32, 51, 0.08);
|
|
}
|
|
|
|
.panel-heading {
|
|
@apply flex flex-col gap-2;
|
|
}
|
|
|
|
.panel-heading strong,
|
|
.placeholder-block strong {
|
|
color: #172033;
|
|
}
|
|
|
|
.panel-heading strong {
|
|
@apply text-lg font-black;
|
|
}
|
|
|
|
.placeholder-block {
|
|
@apply flex flex-col gap-2 rounded-[1.25rem] border p-4;
|
|
background: #fffaf2;
|
|
border-color: rgba(23, 32, 51, 0.08);
|
|
}
|
|
|
|
.placeholder-block strong {
|
|
@apply text-xl font-black;
|
|
}
|
|
</style>
|