Sliding transition for subscription modal
This commit is contained in:
Julien Nahum
parent
1adac8e00f
commit
2618c24293
|
|
@ -0,0 +1,95 @@
|
||||||
|
<template>
|
||||||
|
<transition
|
||||||
|
:name="transitionName"
|
||||||
|
@enter="enter"
|
||||||
|
@leave="leave"
|
||||||
|
@after-enter="resetStyles"
|
||||||
|
@after-leave="resetStyles"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref, watch } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
direction: {
|
||||||
|
type: String,
|
||||||
|
default: 'horizontal',
|
||||||
|
validator: (value) => ['vertical', 'horizontal'].includes(value)
|
||||||
|
},
|
||||||
|
step: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const previousStep = ref(props.step)
|
||||||
|
const transitionName = computed(() => {
|
||||||
|
const baseTransition = props.direction === 'vertical' ? 'slide-vertical' : 'slide-horizontal'
|
||||||
|
return `${baseTransition}-${props.step > previousStep.value ? 'forward' : 'backward'}`
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(() => props.step, (newStep, oldStep) => {
|
||||||
|
previousStep.value = oldStep
|
||||||
|
})
|
||||||
|
|
||||||
|
const enter = (el, done) => {
|
||||||
|
const { height } = el.getBoundingClientRect()
|
||||||
|
el.style.height = '0'
|
||||||
|
el.offsetHeight // force reflow
|
||||||
|
el.style.height = `${height}px`
|
||||||
|
el.addEventListener('transitionend', done, { once: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
const leave = (el, done) => {
|
||||||
|
const { height } = el.getBoundingClientRect()
|
||||||
|
el.style.height = `${height}px`
|
||||||
|
el.offsetHeight // force reflow
|
||||||
|
el.style.height = '0'
|
||||||
|
el.addEventListener('transitionend', done, { once: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetStyles = (el) => {
|
||||||
|
el.style.height = ''
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.slide-horizontal-forward-enter-active,
|
||||||
|
.slide-horizontal-forward-leave-active,
|
||||||
|
.slide-horizontal-backward-enter-active,
|
||||||
|
.slide-horizontal-backward-leave-active,
|
||||||
|
.slide-vertical-forward-enter-active,
|
||||||
|
.slide-vertical-forward-leave-active,
|
||||||
|
.slide-vertical-backward-enter-active,
|
||||||
|
.slide-vertical-backward-leave-active {
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-horizontal-forward-enter-from,
|
||||||
|
.slide-horizontal-backward-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-horizontal-forward-leave-to,
|
||||||
|
.slide-horizontal-backward-enter-from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-vertical-forward-enter-from,
|
||||||
|
.slide-vertical-backward-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-vertical-forward-leave-to,
|
||||||
|
.slide-vertical-backward-enter-from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-30px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -5,320 +5,29 @@
|
||||||
max-width="screen-lg"
|
max-width="screen-lg"
|
||||||
backdrop-blur
|
backdrop-blur
|
||||||
@close="subscriptionModalStore.closeModal()"
|
@close="subscriptionModalStore.closeModal()"
|
||||||
|
>
|
||||||
|
<div class="overflow-hidden">
|
||||||
|
<SlidingTransition
|
||||||
|
direction="horizontal"
|
||||||
|
:step="currentStep"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
:key="currentStep"
|
||||||
|
class="w-full"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="currentStep === 1"
|
v-if="currentStep === 1"
|
||||||
class="flex flex-col items-center pr-4 pb-20 pl-6 rounded-2xl max-md:pl-5 relative"
|
key="step1"
|
||||||
|
class="flex flex-col items-center px-4 pb-20 rounded-2xl relative"
|
||||||
>
|
>
|
||||||
<main class="flex flex-col mt-4 max-w-full text-center w-[591px] max-md:mt-10">
|
<main class="flex flex-col mt-4 max-w-full text-center w-[591px] max-md:mt-10">
|
||||||
<svg
|
<img
|
||||||
|
src="/img/subscription-modal-icon.svg"
|
||||||
|
alt="Subscription Icon"
|
||||||
class="self-center max-w-full aspect-[0.98] w-[107px]"
|
class="self-center max-w-full aspect-[0.98] w-[107px]"
|
||||||
viewBox="0 0 108 109"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
>
|
||||||
<g opacity="0.5">
|
|
||||||
<path
|
|
||||||
d="M94.5371 90H95.5371V89V22C95.5371 18.134 92.4031 15 88.5371 15H37.5371C33.6711 15 30.5371 18.134 30.5371 22V89V90H31.5371H94.5371Z"
|
|
||||||
fill="url(#paint0_linear_6894_874)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M94.5371 90H95.5371V89V22C95.5371 18.134 92.4031 15 88.5371 15H37.5371C33.6711 15 30.5371 18.134 30.5371 22V89V90H31.5371H94.5371Z"
|
|
||||||
stroke="url(#paint1_linear_6894_874)"
|
|
||||||
stroke-width="2"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
x="39.5371"
|
|
||||||
y="24"
|
|
||||||
width="47"
|
|
||||||
height="4"
|
|
||||||
rx="2"
|
|
||||||
fill="url(#paint2_linear_6894_874)"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
x="39.5371"
|
|
||||||
y="34"
|
|
||||||
width="47"
|
|
||||||
height="4"
|
|
||||||
rx="2"
|
|
||||||
fill="url(#paint3_linear_6894_874)"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
x="39.5371"
|
|
||||||
y="44"
|
|
||||||
width="24"
|
|
||||||
height="4"
|
|
||||||
rx="2"
|
|
||||||
fill="url(#paint4_linear_6894_874)"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<path
|
|
||||||
d="M78.5371 96H79.5371V95V28C79.5371 24.134 76.4031 21 72.5371 21H21.5371C17.6711 21 14.5371 24.134 14.5371 28V95V96H15.5371H78.5371Z"
|
|
||||||
fill="url(#paint5_linear_6894_874)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M78.5371 96H79.5371V95V28C79.5371 24.134 76.4031 21 72.5371 21H21.5371C17.6711 21 14.5371 24.134 14.5371 28V95V96H15.5371H78.5371Z"
|
|
||||||
stroke="url(#paint6_linear_6894_874)"
|
|
||||||
stroke-width="2"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
x="23.5371"
|
|
||||||
y="30"
|
|
||||||
width="47"
|
|
||||||
height="4"
|
|
||||||
rx="2"
|
|
||||||
fill="url(#paint7_linear_6894_874)"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
x="23.5371"
|
|
||||||
y="40"
|
|
||||||
width="47"
|
|
||||||
height="4"
|
|
||||||
rx="2"
|
|
||||||
fill="url(#paint8_linear_6894_874)"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
x="23.5371"
|
|
||||||
y="50"
|
|
||||||
width="24"
|
|
||||||
height="4"
|
|
||||||
rx="2"
|
|
||||||
fill="url(#paint9_linear_6894_874)"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
width="100"
|
|
||||||
height="100"
|
|
||||||
transform="translate(0.5 9)"
|
|
||||||
fill="url(#paint10_linear_6894_874)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M89.7665 18.8875L88.75 22.236L87.7335 18.8875C87.1996 17.1288 85.7389 15.754 83.8702 15.2515L80.3125 14.2948L83.8702 13.3381C85.7389 12.8356 87.1996 11.4608 87.7335 9.70209L88.75 6.35363L89.7665 9.70209C90.3004 11.4608 91.7611 12.8356 93.6298 13.3381L97.1875 14.2948L93.6298 15.2515C91.7611 15.754 90.3004 17.1288 89.7665 18.8875Z"
|
|
||||||
stroke="url(#paint11_linear_6894_874)"
|
|
||||||
stroke-width="1.25"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M100.324 10.4296L100 11.6477L99.6764 10.4296C99.2985 9.00696 98.1183 7.89618 96.6068 7.54053L95.3125 7.23598L96.6068 6.93144C98.1183 6.57579 99.2985 5.46501 99.6764 4.04241L100 2.82422L100.324 4.04241C100.701 5.46501 101.882 6.57579 103.393 6.93144L104.688 7.23598L103.393 7.54053C101.882 7.89618 100.701 9.00695 100.324 10.4296Z"
|
|
||||||
stroke="url(#paint12_linear_6894_874)"
|
|
||||||
stroke-width="1.25"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M98.6178 24.3739L98.125 25.7654L97.6322 24.3739C97.3523 23.5835 96.6932 22.9633 95.8534 22.6998L94.375 22.236L95.8534 21.7722C96.6932 21.5087 97.3523 20.8884 97.6322 20.098L98.125 18.7066L98.6178 20.098C98.8977 20.8884 99.5568 21.5087 100.397 21.7722L101.875 22.236L100.397 22.6998C99.5568 22.9633 98.8977 23.5835 98.6178 24.3739Z"
|
|
||||||
stroke="url(#paint13_linear_6894_874)"
|
|
||||||
stroke-width="1.25"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<defs>
|
|
||||||
<linearGradient
|
|
||||||
id="paint0_linear_6894_874"
|
|
||||||
x1="31.6431"
|
|
||||||
y1="17.1538"
|
|
||||||
x2="97.3504"
|
|
||||||
y2="81.7277"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#F5F8FB" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="white"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint1_linear_6894_874"
|
|
||||||
x1="31.2928"
|
|
||||||
y1="93.4417"
|
|
||||||
x2="93.1583"
|
|
||||||
y2="93.3534"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#CBD5E1" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="#EAEEF2"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint2_linear_6894_874"
|
|
||||||
x1="39.3548"
|
|
||||||
y1="28.2434"
|
|
||||||
x2="85.4911"
|
|
||||||
y2="27.347"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#CBD5E1" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="#EAEEF2"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint3_linear_6894_874"
|
|
||||||
x1="39.3548"
|
|
||||||
y1="38.2434"
|
|
||||||
x2="85.4911"
|
|
||||||
y2="37.347"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#CBD5E1" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="#EAEEF2"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint4_linear_6894_874"
|
|
||||||
x1="39.444"
|
|
||||||
y1="48.2434"
|
|
||||||
x2="63.0096"
|
|
||||||
y2="48.0096"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#CBD5E1" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="#EAEEF2"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint5_linear_6894_874"
|
|
||||||
x1="15.6431"
|
|
||||||
y1="23.1538"
|
|
||||||
x2="81.3504"
|
|
||||||
y2="87.7277"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#F5F8FB" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="white"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint6_linear_6894_874"
|
|
||||||
x1="15.2928"
|
|
||||||
y1="99.4417"
|
|
||||||
x2="77.1583"
|
|
||||||
y2="99.3534"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#CBD5E1" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="#EAEEF2"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint7_linear_6894_874"
|
|
||||||
x1="23.3548"
|
|
||||||
y1="34.2434"
|
|
||||||
x2="69.4911"
|
|
||||||
y2="33.347"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#CBD5E1" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="#EAEEF2"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint8_linear_6894_874"
|
|
||||||
x1="23.3548"
|
|
||||||
y1="44.2434"
|
|
||||||
x2="69.4911"
|
|
||||||
y2="43.347"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#CBD5E1" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="#EAEEF2"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint9_linear_6894_874"
|
|
||||||
x1="23.444"
|
|
||||||
y1="54.2434"
|
|
||||||
x2="47.0096"
|
|
||||||
y2="54.0096"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#CBD5E1" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="#EAEEF2"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint10_linear_6894_874"
|
|
||||||
x1="50"
|
|
||||||
y1="0"
|
|
||||||
x2="50"
|
|
||||||
y2="100"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop
|
|
||||||
offset="0.53"
|
|
||||||
stop-color="white"
|
|
||||||
stop-opacity="0"
|
|
||||||
/>
|
|
||||||
<stop
|
|
||||||
offset="0.84"
|
|
||||||
stop-color="white"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint11_linear_6894_874"
|
|
||||||
x1="92.5"
|
|
||||||
y1="2.82422"
|
|
||||||
x2="92.5"
|
|
||||||
y2="25.7654"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#B4D5FF" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="#2B88FD"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint12_linear_6894_874"
|
|
||||||
x1="92.5"
|
|
||||||
y1="2.82422"
|
|
||||||
x2="92.5"
|
|
||||||
y2="25.7654"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#B4D5FF" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="#2B88FD"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="paint13_linear_6894_874"
|
|
||||||
x1="92.5"
|
|
||||||
y1="2.82422"
|
|
||||||
x2="92.5"
|
|
||||||
y2="25.7654"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stop-color="#B4D5FF" />
|
|
||||||
<stop
|
|
||||||
offset="1"
|
|
||||||
stop-color="#2B88FD"
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
<section class="flex flex-col mt-2 max-md:max-w-full">
|
<section class="flex flex-col mt-2 max-md:max-w-full">
|
||||||
<h1
|
<h1 class="text-2xl font-bold tracking-tight leading-9 text-slate-800 max-md:max-w-full">
|
||||||
class="justify-center self-center text-2xl font-bold tracking-tight leading-9 text-slate-800 max-md:max-w-full"
|
|
||||||
>
|
|
||||||
{{ subscriptionModalStore.modal_title }}
|
{{ subscriptionModalStore.modal_title }}
|
||||||
</h1>
|
</h1>
|
||||||
<p class="mt-4 text-base leading-6 text-slate-500 max-md:max-w-full">
|
<p class="mt-4 text-base leading-6 text-slate-500 max-md:max-w-full">
|
||||||
|
|
@ -339,9 +48,9 @@
|
||||||
class="flex flex-col w-6/12 max-md:ml-0 max-md:w-full m-auto"
|
class="flex flex-col w-6/12 max-md:ml-0 max-md:w-full m-auto"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col grow justify-between p-6 w-full bg-blue-50 rounded-2xl max-md:px-5 max-md:mt-2">
|
<div class="flex flex-col grow justify-between p-6 w-full bg-blue-50 rounded-2xl max-md:px-5 max-md:mt-2">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col items-center">
|
||||||
<div class="flex gap-2 py-px">
|
<div class="flex gap-2 py-px">
|
||||||
<h2 class="my-auto text-lg font-medium tracking-tighter leading-5 text-slate-900">
|
<h2 class="my-auto text-xl font-semibold tracking-tighter leading-5 text-slate-900">
|
||||||
Pro
|
Pro
|
||||||
</h2>
|
</h2>
|
||||||
<span
|
<span
|
||||||
|
|
@ -352,7 +61,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-end mt-4 leading-[100%]">
|
<div class="flex flex-col justify-end mt-4 leading-[100%]">
|
||||||
<p class="text-2xl font-semibold tracking-tight text-slate-900">
|
<p class="text-2xl font-semibold tracking-tight text-slate-900 text-center">
|
||||||
<template v-if="isYearly">
|
<template v-if="isYearly">
|
||||||
$16
|
$16
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -370,9 +79,6 @@
|
||||||
</template>
|
</template>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="mt-4 text-sm leading-5 text-slate-500">
|
|
||||||
For companies and more customization on their forms.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<v-button
|
<v-button
|
||||||
v-if="!user?.is_subscribed"
|
v-if="!user?.is_subscribed"
|
||||||
|
|
@ -496,6 +202,7 @@
|
||||||
</div>
|
</div>
|
||||||
<section
|
<section
|
||||||
v-else-if="currentStep === 2"
|
v-else-if="currentStep === 2"
|
||||||
|
key="step2"
|
||||||
class="flex flex-col items-center px-6 pb-4 bg-white rounded-2xl w-full"
|
class="flex flex-col items-center px-6 pb-4 bg-white rounded-2xl w-full"
|
||||||
>
|
>
|
||||||
<div class="flex gap-2 max-md:flex-wrap">
|
<div class="flex gap-2 max-md:flex-wrap">
|
||||||
|
|
@ -503,7 +210,7 @@
|
||||||
<Icon
|
<Icon
|
||||||
name="heroicons:chevron-left-16-solid"
|
name="heroicons:chevron-left-16-solid"
|
||||||
class="h-6 w-6 cursor-pointer"
|
class="h-6 w-6 cursor-pointer"
|
||||||
@click.prevent="currentStep=1"
|
@click.prevent="goBackToStep1"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="flex-1 my-auto text-xl font-bold leading-8 text-center text-slate-800 max-md:max-w-full">
|
<h1 class="flex-1 my-auto text-xl font-bold leading-8 text-center text-slate-800 max-md:max-w-full">
|
||||||
|
|
@ -605,17 +312,21 @@
|
||||||
<UButton
|
<UButton
|
||||||
size="md"
|
size="md"
|
||||||
color="white"
|
color="white"
|
||||||
@click="currentStep=1"
|
@click="goBackToStep1"
|
||||||
>
|
>
|
||||||
Back
|
Back
|
||||||
</UButton>
|
</UButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
</SlidingTransition>
|
||||||
|
</div>
|
||||||
</modal>
|
</modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import SlidingTransition from '~/components/global/transitions/SlidingTransition.vue'
|
||||||
import { fetchAllWorkspaces } from '~/stores/workspaces.js'
|
import { fetchAllWorkspaces } from '~/stores/workspaces.js'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
@ -715,7 +426,6 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
const onSelectPlan = (planName) => {
|
const onSelectPlan = (planName) => {
|
||||||
if (!authenticated.value) {
|
if (!authenticated.value) {
|
||||||
subscriptionModalStore.closeModal()
|
subscriptionModalStore.closeModal()
|
||||||
|
|
@ -729,6 +439,10 @@ const onSelectPlan = (planName) => {
|
||||||
currentStep.value = 2
|
currentStep.value = 2
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const goBackToStep1 = () => {
|
||||||
|
currentStep.value = 1
|
||||||
|
}
|
||||||
|
|
||||||
const saveDetails = () => {
|
const saveDetails = () => {
|
||||||
if (form.busy)
|
if (form.busy)
|
||||||
return
|
return
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,304 @@
|
||||||
|
<svg
|
||||||
|
class="self-center max-w-full aspect-[0.98] w-[107px]"
|
||||||
|
viewBox="0 0 108 109"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g opacity="0.5">
|
||||||
|
<path
|
||||||
|
d="M94.5371 90H95.5371V89V22C95.5371 18.134 92.4031 15 88.5371 15H37.5371C33.6711 15 30.5371 18.134 30.5371 22V89V90H31.5371H94.5371Z"
|
||||||
|
fill="url(#paint0_linear_6894_874)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M94.5371 90H95.5371V89V22C95.5371 18.134 92.4031 15 88.5371 15H37.5371C33.6711 15 30.5371 18.134 30.5371 22V89V90H31.5371H94.5371Z"
|
||||||
|
stroke="url(#paint1_linear_6894_874)"
|
||||||
|
stroke-width="2"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="39.5371"
|
||||||
|
y="24"
|
||||||
|
width="47"
|
||||||
|
height="4"
|
||||||
|
rx="2"
|
||||||
|
fill="url(#paint2_linear_6894_874)"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="39.5371"
|
||||||
|
y="34"
|
||||||
|
width="47"
|
||||||
|
height="4"
|
||||||
|
rx="2"
|
||||||
|
fill="url(#paint3_linear_6894_874)"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="39.5371"
|
||||||
|
y="44"
|
||||||
|
width="24"
|
||||||
|
height="4"
|
||||||
|
rx="2"
|
||||||
|
fill="url(#paint4_linear_6894_874)"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
d="M78.5371 96H79.5371V95V28C79.5371 24.134 76.4031 21 72.5371 21H21.5371C17.6711 21 14.5371 24.134 14.5371 28V95V96H15.5371H78.5371Z"
|
||||||
|
fill="url(#paint5_linear_6894_874)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M78.5371 96H79.5371V95V28C79.5371 24.134 76.4031 21 72.5371 21H21.5371C17.6711 21 14.5371 24.134 14.5371 28V95V96H15.5371H78.5371Z"
|
||||||
|
stroke="url(#paint6_linear_6894_874)"
|
||||||
|
stroke-width="2"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="23.5371"
|
||||||
|
y="30"
|
||||||
|
width="47"
|
||||||
|
height="4"
|
||||||
|
rx="2"
|
||||||
|
fill="url(#paint7_linear_6894_874)"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="23.5371"
|
||||||
|
y="40"
|
||||||
|
width="47"
|
||||||
|
height="4"
|
||||||
|
rx="2"
|
||||||
|
fill="url(#paint8_linear_6894_874)"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="23.5371"
|
||||||
|
y="50"
|
||||||
|
width="24"
|
||||||
|
height="4"
|
||||||
|
rx="2"
|
||||||
|
fill="url(#paint9_linear_6894_874)"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
transform="translate(0.5 9)"
|
||||||
|
fill="url(#paint10_linear_6894_874)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M89.7665 18.8875L88.75 22.236L87.7335 18.8875C87.1996 17.1288 85.7389 15.754 83.8702 15.2515L80.3125 14.2948L83.8702 13.3381C85.7389 12.8356 87.1996 11.4608 87.7335 9.70209L88.75 6.35363L89.7665 9.70209C90.3004 11.4608 91.7611 12.8356 93.6298 13.3381L97.1875 14.2948L93.6298 15.2515C91.7611 15.754 90.3004 17.1288 89.7665 18.8875Z"
|
||||||
|
stroke="url(#paint11_linear_6894_874)"
|
||||||
|
stroke-width="1.25"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M100.324 10.4296L100 11.6477L99.6764 10.4296C99.2985 9.00696 98.1183 7.89618 96.6068 7.54053L95.3125 7.23598L96.6068 6.93144C98.1183 6.57579 99.2985 5.46501 99.6764 4.04241L100 2.82422L100.324 4.04241C100.701 5.46501 101.882 6.57579 103.393 6.93144L104.688 7.23598L103.393 7.54053C101.882 7.89618 100.701 9.00695 100.324 10.4296Z"
|
||||||
|
stroke="url(#paint12_linear_6894_874)"
|
||||||
|
stroke-width="1.25"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M98.6178 24.3739L98.125 25.7654L97.6322 24.3739C97.3523 23.5835 96.6932 22.9633 95.8534 22.6998L94.375 22.236L95.8534 21.7722C96.6932 21.5087 97.3523 20.8884 97.6322 20.098L98.125 18.7066L98.6178 20.098C98.8977 20.8884 99.5568 21.5087 100.397 21.7722L101.875 22.236L100.397 22.6998C99.5568 22.9633 98.8977 23.5835 98.6178 24.3739Z"
|
||||||
|
stroke="url(#paint13_linear_6894_874)"
|
||||||
|
stroke-width="1.25"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="paint0_linear_6894_874"
|
||||||
|
x1="31.6431"
|
||||||
|
y1="17.1538"
|
||||||
|
x2="97.3504"
|
||||||
|
y2="81.7277"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#F5F8FB" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="white"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint1_linear_6894_874"
|
||||||
|
x1="31.2928"
|
||||||
|
y1="93.4417"
|
||||||
|
x2="93.1583"
|
||||||
|
y2="93.3534"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#CBD5E1" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#EAEEF2"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint2_linear_6894_874"
|
||||||
|
x1="39.3548"
|
||||||
|
y1="28.2434"
|
||||||
|
x2="85.4911"
|
||||||
|
y2="27.347"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#CBD5E1" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#EAEEF2"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint3_linear_6894_874"
|
||||||
|
x1="39.3548"
|
||||||
|
y1="38.2434"
|
||||||
|
x2="85.4911"
|
||||||
|
y2="37.347"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#CBD5E1" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#EAEEF2"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint4_linear_6894_874"
|
||||||
|
x1="39.444"
|
||||||
|
y1="48.2434"
|
||||||
|
x2="63.0096"
|
||||||
|
y2="48.0096"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#CBD5E1" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#EAEEF2"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint5_linear_6894_874"
|
||||||
|
x1="15.6431"
|
||||||
|
y1="23.1538"
|
||||||
|
x2="81.3504"
|
||||||
|
y2="87.7277"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#F5F8FB" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="white"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint6_linear_6894_874"
|
||||||
|
x1="15.2928"
|
||||||
|
y1="99.4417"
|
||||||
|
x2="77.1583"
|
||||||
|
y2="99.3534"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#CBD5E1" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#EAEEF2"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint7_linear_6894_874"
|
||||||
|
x1="23.3548"
|
||||||
|
y1="34.2434"
|
||||||
|
x2="69.4911"
|
||||||
|
y2="33.347"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#CBD5E1" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#EAEEF2"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint8_linear_6894_874"
|
||||||
|
x1="23.3548"
|
||||||
|
y1="44.2434"
|
||||||
|
x2="69.4911"
|
||||||
|
y2="43.347"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#CBD5E1" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#EAEEF2"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint9_linear_6894_874"
|
||||||
|
x1="23.444"
|
||||||
|
y1="54.2434"
|
||||||
|
x2="47.0096"
|
||||||
|
y2="54.0096"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#CBD5E1" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#EAEEF2"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint10_linear_6894_874"
|
||||||
|
x1="50"
|
||||||
|
y1="0"
|
||||||
|
x2="50"
|
||||||
|
y2="100"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop
|
||||||
|
offset="0.53"
|
||||||
|
stop-color="white"
|
||||||
|
stop-opacity="0"
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
offset="0.84"
|
||||||
|
stop-color="white"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint11_linear_6894_874"
|
||||||
|
x1="92.5"
|
||||||
|
y1="2.82422"
|
||||||
|
x2="92.5"
|
||||||
|
y2="25.7654"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#B4D5FF" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#2B88FD"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint12_linear_6894_874"
|
||||||
|
x1="92.5"
|
||||||
|
y1="2.82422"
|
||||||
|
x2="92.5"
|
||||||
|
y2="25.7654"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#B4D5FF" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#2B88FD"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint13_linear_6894_874"
|
||||||
|
x1="92.5"
|
||||||
|
y1="2.82422"
|
||||||
|
x2="92.5"
|
||||||
|
y2="25.7654"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#B4D5FF" />
|
||||||
|
<stop
|
||||||
|
offset="1"
|
||||||
|
stop-color="#2B88FD"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 9.7 KiB |
Loading…
Reference in New Issue