mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 07:48:37 +01:00
change pricing page
This commit is contained in:
Emily
@@ -1,58 +1,68 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
export type PricingCardProp = {
|
||||||
type Prop = {
|
|
||||||
title: string,
|
title: string,
|
||||||
icon: string,
|
cost: string,
|
||||||
list: { text: string, icon: string }[],
|
features: string[],
|
||||||
price: string,
|
desc: string,
|
||||||
|
active: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = defineProps<Prop>();
|
const props = defineProps<{ data: PricingCardProp }>();
|
||||||
|
|
||||||
|
|
||||||
|
function onUpgradeClick() {
|
||||||
|
window.open('https://dashboard.litlyx.com/book_demo')
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="bg-menu py-6 rounded-lg w-full h-full flex flex-col items-center justify-normal px-6 relative">
|
<div class="p-6 bg-[#303030] rounded-xl pricing-card flex flex-col">
|
||||||
|
|
||||||
<div
|
<div class="flex flex-col">
|
||||||
class="absolute rounded-full top-[-2.1rem] bg-accent w-[4.2rem] h-[4.2rem] flex items-center justify-center">
|
<div class="text-[1.1rem] font-semibold mb-4">
|
||||||
<i :class="icon" class="text-[2.5rem]"></i>
|
{{ data.title }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex gap-1 items-end mb-2">
|
||||||
<div class="poppins mt-6 font-semibold text-[1.4rem]">
|
<div class="text-[1.1rem] font-semibold">
|
||||||
{{ title }}
|
€{{ data.cost }}
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gray-400/50 h-[1px] w-full mt-6 mb-10"></div>
|
|
||||||
|
|
||||||
<div class="flex flex-col gap-4">
|
|
||||||
<div class="flex gap-3 items-center" v-for="element of list">
|
|
||||||
|
|
||||||
<div class="shrink-0 flex items-center bg-accent w-[2rem] h-[2rem] justify-center rounded-full">
|
|
||||||
<i :class="element.icon" class="text-[.9rem]"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="text-text-sub text-[.9rem] mb-[.15rem]">
|
||||||
<div class="poppins">
|
per month
|
||||||
{{ element.text }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div @click="onUpgradeClick()" v-if="data.active" class="cursor-pointer text-[1rem] font-semibold bg-[#3a3af5] rounded-md py-2 text-center">
|
||||||
|
Start now for FREE
|
||||||
<div class="bg-gray-400/50 h-[1px] w-full mt-10 mb-6"></div>
|
|
||||||
|
|
||||||
<div class="flex gap-2 justify-between w-full">
|
|
||||||
<div class="flex gap-2 items-end">
|
|
||||||
<div class="manrope text-[2.5rem] font-bold text-text"> {{ price }} </div>
|
|
||||||
<div class="poppins text-text-sub/90 mb-1">/month</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div @click="onUpgradeClick()" v-if="!data.active" class="cursor-pointer text-[1rem] font-semibold bg-[#4d4d4d] rounded-md py-2 text-center">
|
||||||
<div>
|
Upgrade
|
||||||
Tasto bello
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gray-400 h-[1px] w-full my-4"></div>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-1 grow">
|
||||||
|
<div class="flex gap-2 items-center" v-for="feature of data.features">
|
||||||
|
<i class="fas fa-check"></i>
|
||||||
|
<div>
|
||||||
|
{{ feature }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gray-400 h-[1px] w-full my-4"></div>
|
||||||
|
|
||||||
|
<div class="text-text-sub text-[.9rem] h-[20%]">
|
||||||
|
{{ data.desc }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.pricing-card * {
|
||||||
|
font-family: "Poppins";
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -2,110 +2,99 @@
|
|||||||
import { Vue3Lottie } from 'vue3-lottie';
|
import { Vue3Lottie } from 'vue3-lottie';
|
||||||
|
|
||||||
|
|
||||||
|
const starterTierCardData = ref<any>({
|
||||||
|
title: 'STARTER',
|
||||||
|
cost: '0',
|
||||||
|
features: [
|
||||||
|
"3K visits/events per month",
|
||||||
|
"10 AI Interaction per month",
|
||||||
|
"1 month data retention",
|
||||||
|
"Limited reports",
|
||||||
|
"1 Team member",
|
||||||
|
"Limited Automatic Email Report",
|
||||||
|
"Shared Server & DB",
|
||||||
|
"Low priority email support",
|
||||||
|
],
|
||||||
|
desc: `Free project are not reliable and sometimes
|
||||||
|
can experience some data loss.To have a
|
||||||
|
dedicated server we suggest to upgrade the
|
||||||
|
plan to an higher one!`,
|
||||||
|
active: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const accelerationTierCardData = ref<any>({
|
||||||
|
title: 'ACCELERATION',
|
||||||
|
cost: '9.99',
|
||||||
|
features: [
|
||||||
|
"150K visits/events per month",
|
||||||
|
"100 AI Interaction per month",
|
||||||
|
"6 months data retention",
|
||||||
|
"Limited reports",
|
||||||
|
"1 Team member",
|
||||||
|
"Limited Automatic Email Report",
|
||||||
|
"Shared Server & DB",
|
||||||
|
"Low priority email support"
|
||||||
|
],
|
||||||
|
desc: `Your project is entering a growth phase. We simplify data analysis for you. For more support, try our Expansion plan—it's worth it!`,
|
||||||
|
active: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const expansionTierCardData = ref<any>({
|
||||||
|
title: 'EXPANSION',
|
||||||
|
cost: '39.99',
|
||||||
|
features: [
|
||||||
|
"500K visits/events per month",
|
||||||
|
"5000 AI Interaction per month",
|
||||||
|
"2 years data retention",
|
||||||
|
"Unlimited reports",
|
||||||
|
"10 Team member",
|
||||||
|
"Unlimited Automatic Email Report",
|
||||||
|
"Dedicated Server & DB",
|
||||||
|
"high priority email support"
|
||||||
|
],
|
||||||
|
desc: `We will support you with everything we can offer and give you the full power of our service. If you need more space and are growing, contact us for a custom offer!`,
|
||||||
|
active: false
|
||||||
|
});
|
||||||
|
|
||||||
definePageMeta({ layout: 'header' });
|
definePageMeta({ layout: 'header' });
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!--
|
|
||||||
<div class="home h-full overflow-y-auto relative">
|
|
||||||
|
|
||||||
<div class="absolute top-0 left-0 w-full h-full flex flex-col items-center z-0 overflow-hidden">
|
<div class="home h-full w-full min-h-[40dvh]">
|
||||||
<HomeBgGrid :size="50" :spacing="18" opacity="0.3" class="w-fit h-fit"></HomeBgGrid>
|
|
||||||
<HomeBgGrid :size="50" :spacing="18" opacity="0.3" class="w-fit h-fit"></HomeBgGrid>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full justify-center px-20">
|
<div class="p-8">
|
||||||
<SelectButton class="text-[1.4rem]" :current-index="0" :options="[
|
|
||||||
{ label: 'Monthly' },
|
|
||||||
{ label: 'Yearly' },
|
|
||||||
]"></SelectButton>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex mt-20 gap-10 mx-20">
|
<div class="flex gap-8 h-max">
|
||||||
|
<PricingCard class="flex-1" :data="starterTierCardData"></PricingCard>
|
||||||
|
<PricingCard class="flex-1" :data="accelerationTierCardData"></PricingCard>
|
||||||
|
<PricingCard class="flex-1" :data="expansionTierCardData"></PricingCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
<PricingCard title="Free plan" icon="far fa-fire" price="€ 54" :list="[
|
<div class="flex justify-between items-center mt-10">
|
||||||
|
|
||||||
{ text: '3k Page visits / Custom Events (one time)', icon: 'fas fa-check' },
|
|
||||||
{ text: 'Access to Crm', icon: 'fas fa-check' },
|
|
||||||
{ text: 'Download CSV Raw data', icon: 'fas fa-check' },
|
|
||||||
{ text: 'PDF Report For investor', icon: 'fas fa-check' },
|
|
||||||
|
|
||||||
{ text: 'Team member', icon: '' },
|
|
||||||
{ text: 'Only 1 project connected', icon: '' },
|
|
||||||
|
|
||||||
]"></PricingCard>
|
|
||||||
|
|
||||||
<PricingCard title="Free plan" icon="far fa-fire" price="€ 54" :list="[
|
|
||||||
|
|
||||||
{ text: '3k Page visits / Custom Events (one time)', icon: 'fas fa-check' },
|
|
||||||
{ text: 'Access to Crm', icon: 'fas fa-check' },
|
|
||||||
{ text: 'Download CSV Raw data', icon: 'fas fa-check' },
|
|
||||||
{ text: 'PDF Report For investor', icon: 'fas fa-check' },
|
|
||||||
|
|
||||||
{ text: 'Team member', icon: '' },
|
|
||||||
{ text: 'Only 1 project connected', icon: '' },
|
|
||||||
|
|
||||||
]"></PricingCard>
|
|
||||||
|
|
||||||
<PricingCard title="Free plan" icon="far fa-fire" price="€ 54" :list="[
|
|
||||||
|
|
||||||
{ text: '3k Page visits / Custom Events (one time)', icon: 'fas fa-check' },
|
|
||||||
{ text: 'Access to Crm', icon: 'fas fa-check' },
|
|
||||||
{ text: 'Download CSV Raw data', icon: 'fas fa-check' },
|
|
||||||
{ text: 'PDF Report For investor', icon: 'fas fa-check' },
|
|
||||||
|
|
||||||
{ text: 'Team member', icon: '' },
|
|
||||||
{ text: 'Only 1 project connected', icon: '' },
|
|
||||||
|
|
||||||
]"></PricingCard>
|
|
||||||
|
|
||||||
|
|
||||||
<PricingCard title="Free plan" icon="far fa-fire" price="€ 54" :list="[
|
|
||||||
|
|
||||||
{ text: '3k Page visits / Custom Events (one time)', icon: 'fas fa-check' },
|
|
||||||
{ text: 'Access to Crm', icon: 'fas fa-check' },
|
|
||||||
{ text: 'Download CSV Raw data', icon: 'fas fa-check' },
|
|
||||||
{ text: 'PDF Report For investor', icon: 'fas fa-check' },
|
|
||||||
|
|
||||||
{ text: 'Team member', icon: '' },
|
|
||||||
{ text: 'Only 1 project connected', icon: '' },
|
|
||||||
|
|
||||||
]"></PricingCard>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="flex w-full py-20 my-20 px-20">
|
|
||||||
<div class="flex justify-between w-full">
|
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<div class="poppins font-bold text-[2.2rem]">
|
<div class="poppins text-[2rem] font-semibold">
|
||||||
Ready to ditch Google Analytics ?
|
Do you need help ?
|
||||||
</div>
|
</div>
|
||||||
<div class="text-accent poppins font-bold text-[2.2rem]">
|
<div class="poppins text-[1.2rem] text-text/90">
|
||||||
Start your free trial today.
|
We respond in max. 1-2 days
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex gap-4 items-center mr-20">
|
<div class="py-4 px-20 bg-[#303030] rounded-lg">
|
||||||
<div class="poppins px-12 py-6 text-[1.2rem] hover:bg-accent/90 text-text cursor-pointer bg-accent rounded-xl font-semibold">
|
<a href="mailto:helplitlyx@gmail.com" class="poppins text-[1.3rem]">
|
||||||
Get started
|
helplitlyx@gmail.com
|
||||||
</div>
|
</a>
|
||||||
<div class="poppins px-12 py-6 text-[1.2rem] hover:bg-text/90 cursor-pointer text-accent bg-text rounded-xl font-semibold">
|
|
||||||
Live demo
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
|
||||||
|
|
||||||
|
<!-- <Vue3Lottie height="16rem" animation-link="pricing_lottie.json"></Vue3Lottie>
|
||||||
<div class="home h-full w-full min-h-[40dvh]">
|
|
||||||
<Vue3Lottie height="16rem" animation-link="pricing_lottie.json"></Vue3Lottie>
|
|
||||||
<div class="poppins text-[2rem] font-semibold text-center mt-6">
|
<div class="poppins text-[2rem] font-semibold text-center mt-6">
|
||||||
Pricing coming soon
|
Pricing coming soon
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user