94 lines
1.9 KiB
Vue
94 lines
1.9 KiB
Vue
<template>
|
|
<div class="creator-home">
|
|
|
|
<!-- Content sections container -->
|
|
<div class="content-sections">
|
|
|
|
<!-- Donation Section -->
|
|
<div class="section sm:hidden">
|
|
<DonationButton
|
|
v-if="brandingStore.value?.acceptDonation"
|
|
:creator-id="brandingStore.value?.id"
|
|
:creator-name="brandingStore.value?.name"
|
|
:on-cancelled-url="baseURL + '/paymentfailed/' + brandingStore.value?.id"
|
|
:on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id"
|
|
/>
|
|
</div>
|
|
|
|
<!-- About Creator Section -->
|
|
<div class="section">
|
|
<AboutCreator />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import AboutCreator from './AboutCreator.vue';
|
|
import { ref } from 'vue';
|
|
import DonationButton from "@/views/creators/DonationButton.vue";
|
|
import {useBrandingStore} from "@/stores/brandingStore.js";
|
|
|
|
const brandingStore = useBrandingStore();
|
|
const baseURL = window.location.origin;
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.creator-home {
|
|
@apply w-full;
|
|
@apply p-5;
|
|
}
|
|
|
|
.content-sections {
|
|
@apply flex flex-col;
|
|
@apply gap-5;
|
|
}
|
|
|
|
.section {
|
|
@apply rounded-2xl;
|
|
@apply shadow-2xl;
|
|
@apply relative;
|
|
}
|
|
|
|
.section::before {
|
|
content: '';
|
|
@apply absolute inset-0;
|
|
@apply rounded-2xl;
|
|
@apply p-[1px];
|
|
background: linear-gradient(135deg, rgba(64, 64, 64, 1) 0%, rgba(64, 64, 64, 0) 20%, rgba(64, 64, 64, 0.5) 100%);
|
|
mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
}
|
|
|
|
</style>
|
|
|
|
<i18n>
|
|
{
|
|
"en": {
|
|
"creator": {
|
|
"home": {
|
|
"title": "Creator Home"
|
|
}
|
|
}
|
|
},
|
|
"fr": {
|
|
"creator": {
|
|
"home": {
|
|
"title": "Accueil du Créateur"
|
|
}
|
|
}
|
|
},
|
|
"es": {
|
|
"creator": {
|
|
"home": {
|
|
"title": "Inicio del Creador"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</i18n> |