Files
chatwoot/app/javascript/v3/views/onboarding/FoundersNote.vue
T
2024-02-15 22:22:21 +05:30

108 lines
3.6 KiB
Vue

<template>
<div class="h-full w-full dark:bg-slate-900 relative overflow-hidden">
<div
class="absolute inset-0 h-full w-full bg-white dark:bg-slate-900 bg-[radial-gradient(var(--w-100)_1px,transparent_1px)] [background-size:16px_16px] z-0"
/>
<div
class="absolute h-full w-full overlay-gradient top-0 left-0 scale-y-110 blur-[3px]"
/>
<div class="flex h-full relative z-50">
<div
class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
>
<div
class="p-10 max-w-[560px] w-full overflow-auto bg-white dark:bg-slate-900 border border-solid border-slate-100 dark:border-slate-800 rounded-2xl"
>
<section
class="mt-4 space-y-6 text-sm leading-relaxed text-slate-900 dark:text-white"
>
<div
class="rounded-full h-16 w-16 border border-solid border-woot-500 p-4"
>
<div
class="bg-[url('/assets/images/dashboard/onboarding/waving-hand.svg')] bg-contain w-8 h-8"
/>
</div>
<div>
<p
class="uppercase tracking-wide text-slate-900 dark:text-white mb-1"
>
a note from the founder
</p>
<h3 class="text-slate-900 dark:text-white text-3xl font-semibold">
Hey {{ userName }},
</h3>
</div>
<p>
I'm Pranav, one of the co-founders at Chatwoot. Thanks for
checking out Chatwoot. We're eager to understand your needs and
expectations.
</p>
<p>
If you are facing trouble using the app or achieving your use
case, we want to help you as quickly as possible.
</p>
<p>
Feel free to schedule a call with our team. We are open to your
feedback. Talk soon!
</p>
</section>
<figure
class="mt-5 text-sm leading-relaxed text-slate-900 dark:text-white"
>
<woot-thumbnail
src="https://www.chatwoot.com/images/team/pranav.jpg"
username="Pranav"
/>
<p class="mt-2">Pranav, <br />Co-founder & CEO, Chatwoot</p>
</figure>
<submit-button
button-class="flex justify-center w-full text-sm text-center mt-8"
:button-text="$t('START_ONBOARDING.FOUNDERS_NOTE.SUBMIT')"
@click="onSubmit"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import SubmitButton from 'dashboard/components/buttons/FormSubmitButton.vue';
import { mapGetters } from 'vuex';
export default {
components: {
SubmitButton,
},
computed: {
...mapGetters({
currentUser: 'getCurrentUser',
}),
userName() {
return this.currentUser.name;
},
},
methods: {
onSubmit() {
this.$router.push({ name: 'home' });
},
},
};
</script>
<style>
.overlay-gradient {
background: linear-gradient(90deg, rgba(252, 252, 253, 0) 61.8%, #fcfcfd 90%),
linear-gradient(270deg, rgba(252, 252, 253, 0) 66.93%, #fcfcfd 90%),
linear-gradient(0deg, rgba(252, 252, 253, 0) 68.63%, #fcfcfd 90%),
linear-gradient(180deg, rgba(252, 252, 253, 0) 63.2%, #fcfcfd 80%);
}
.dark .overlay-gradient {
background: linear-gradient(270deg, rgba(24, 24, 26, 0) 61.93%, #151718 90%),
linear-gradient(90deg, rgba(24, 24, 26, 0) 66.8%, #151718 90%),
linear-gradient(0deg, rgba(24, 24, 26, 0) 68.63%, #151718 90%),
linear-gradient(180deg, rgba(24, 24, 26, 0) 63.2%, #151718 90%);
}
</style>