Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-10 07:48:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

add social + new pricing

Browse Source
This commit is contained in:
Emily
2024-07-17 16:44:17 +02:00
parent a22aaba3fe
commit 96f4c991b1
7 changed files with 306 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
landing/components/MainButton.vue
View File

@@ -10,7 +10,7 @@ const props = defineProps<{
<template>
<NuxtLink @click="action?.()" :to="link" :target="target || ''"
class="poppins font-[500] px-10 py-[.3rem] bg-[#222A42] outline outline-[1px] outline-[#5680F8] rounded-xl">
class="poppins cursor-pointer font-[500] px-10 py-[.3rem] bg-[#222A42] outline outline-[1px] outline-[#5680F8] rounded-xl">
<slot></slot>
</NuxtLink>
</template>

68
landing/components/pricing/PricingCard.vue
View File

@@ -1,68 +0,0 @@
<script lang="ts" setup>
export type PricingCardProp = {
title: string,
cost: string,
features: string[],
desc: string,
active: boolean
}
const props = defineProps<{ data: PricingCardProp }>();
function onUpgradeClick() {
window.open('https://dashboard.litlyx.com')
}
</script>
<template>
<div class="p-6 bg-[#303030] rounded-xl pricing-card flex flex-col">
<div class="flex flex-col">
<div class="text-[1.1rem] font-semibold mb-4">
{{ data.title }}
</div>
<div class="flex gap-1 items-end mb-2">
<div class="text-[1.1rem] font-semibold">
€{{ data.cost }}
</div>
<div class="text-text-sub text-[.9rem] mb-[.15rem]">
per month
</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>
<div @click="onUpgradeClick()" v-if="!data.active" class="cursor-pointer text-[1rem] font-semibold bg-[#141414] rounded-md py-2 text-center">
Go to Dashboard
</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>
</template>
<style scoped lang="scss">
.pricing-card * {
font-family: "Poppins";
}
</style>

69
landing/components/pricing/PricingCardGeneric.vue Normal file
View File

@@ -0,0 +1,69 @@
<script lang="ts" setup>
export type PricingCardProp = {
title: string,
price: string,
subs: string[],
features: string[],
cta: string,
link?: string
}
const props = defineProps<{ datas: PricingCardProp[] }>();
const currentIndex = ref<number>(0);
const data = computed(() => {
return props.datas[currentIndex.value];
})
</script>
<template>
<div class="bg-[#151515] outline outline-[1px] outline-[#262626] py-8 px-10 rounded-lg w-full max-w-[30rem]">
<div class="flex flex-col gap-3 text-center">
<div class="poppins text-xl font-light"> {{ data.title }} </div>
<div class="poppins text-4xl font-medium"> {{ data.price }} </div>
</div>
<div class="sep bg-[#262626] h-[1px] my-8"></div>
<div class="flex flex-col text-center h-[6rem] justify-center gap-2">
<div v-if="datas.length > 1">
<URange :ui="{
thumb: {
color: 'text-[#5680f8]'
},
progress: {
background: '!bg-[#5680f8]'
}
}" :min="0" :max="datas.length - 1" v-model="currentIndex">
</URange>
</div>
<div class="poppins" v-for="sub of data.subs"> {{ sub }} </div>
</div>
<div class="sep bg-[#262626] h-[1px] my-8"></div>
<div class="flex flex-col gap-2">
<div class="flex gap-2" v-for="feature of data.features">
<div class="h-6 w-6">
<img class="w-full h-full" :src="'check.png'" alt="Check">
</div>
<div>{{ feature }}</div>
</div>
</div>
<div class="mt-10 flex">
<MainButton :link="data.link || 'https://dashboard.litlyx.com'"
class="w-full !rounded-md text-center text-[.9rem] !py-2">
{{ data.cta }}
</MainButton>
</div>
</div>
</template>