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

update landing

Browse Source
This commit is contained in:
Emily
2024-07-24 15:35:58 +02:00
parent e6c9ad9470
commit b5f1783050
6 changed files with 475 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
landing/assets/scss/animations.scss Normal file
View File

@@ -0,0 +1,34 @@
/**
* ----------------------------------------
* animation scale-up-center
* ----------------------------------------
*/
@-webkit-keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.scale-up-center {
-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

1
landing/assets/scss/main.scss
View File

@@ -4,6 +4,7 @@
@import '../font-awesome/css/all.css';
@import './utilities.scss';
@import './animations.scss';
@import url('https://fonts.cdnfonts.com/css/geometric-sans-serif-v1');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

161
landing/pages/index.vue
View File

@@ -33,20 +33,41 @@ const mouseStyle = computed(() => {
const email = ref<string>("");
const scriptDeferTokens = ref<string[]>([
"<",
"script",
" defer ",
"data-project",
"=",
"\"project_id\"",
" src",
"=",
"\"https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js\"",
">",
"<",
"/script",
">",
])
const snippetIndex = ref<number>(0);
</script>
<template>
<div class="home relative h-full w-full bg-lyx-background px-8 py-10 overflow-x-hidden">
<div class="flex justify-center home relative">
<div class="headline">
<div
class="lg:w-[800px] h-full w-full bg-lyx-background px-8 py-10 overflow-x-hidden flex flex-col items-center">
<div class="headline w-full scale-up-center">
Analytics For
<span class="text-lyx-primary"> Developers </span>
</div>
<div class="section">
<div class="section !mt-6">
<div class="paragraph">
30 Seconds Setup with One Line of Code.
@@ -54,22 +75,25 @@ const email = ref<string>("");
</div>
<div class="button-container">
<LyxUiButton class="button" type="primary"> Start for free </LyxUiButton>
<LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
Start for free
</LyxUiButton>
</div>
</div>
<div class="mt-8">
<img :src="'placeholder.jpg'" alt="Placeholder">
<img :src="'screenshot.png'" alt="Litlyx dashboard">
</div>
<div class="text-center poppins mt-8">
Trusted by
<NuxtLink class="font-bold" target="_blank" to="#">NuvolAI</NuxtLink>,
<NuxtLink class="font-bold" target="_blank" to="#">DTech</NuxtLink>,
<NuxtLink class="font-bold" target="_blank" to="#">National Geografic (IT)</NuxtLink>,
<NuxtLink class="font-bold" target="_blank" to="#">DeckX</NuxtLink>,
<NuxtLink class="font-bold" target="_blank" to="#">Antichi Casali Camper Shop</NuxtLink>,
<NuxtLink class="font-bold" target="_blank" to="https://nuvol.ai">NuvolAI</NuxtLink>,
<NuxtLink class="font-bold" target="_blank" to="https://www.nationalgeographic.it">National Geografic
(IT)</NuxtLink>,
<NuxtLink class="font-bold" target="_blank" to="https://deckx.app">DeckX</NuxtLink>,
<NuxtLink class="font-bold" target="_blank" to="https://www.antichicasalicampershop.it">Antichi Casali
Camper Shop</NuxtLink>,
for Data collection.
</div>
@@ -87,19 +111,52 @@ const email = ref<string>("");
<div class="flex justify-center items-center gap-2 text-[.8rem] mt-8">
<LyxUiButton type="secondary"> Javascript </LyxUiButton>
<LyxUiButton type="secondary"> Runtimes </LyxUiButton>
<LyxUiButton type="secondary"> Events </LyxUiButton>
<LyxUiButton :class="{ 'outline outline-[1px] outline-[#CD8700]': snippetIndex == 0 }"
@click="snippetIndex = 0" type="secondary"> Javascript
</LyxUiButton>
<LyxUiButton :class="{ 'outline outline-[1px] outline-[#CD8700]': snippetIndex == 1 }"
@click="snippetIndex = 1" type="secondary"> Runtimes </LyxUiButton>
<LyxUiButton :class="{ 'outline outline-[1px] outline-[#CD8700]': snippetIndex == 2 }"
@click="snippetIndex = 2" type="secondary"> Events </LyxUiButton>
</div>
<LyxUiCard class="w-full mt-8 bg-lyx-background py-6 text-center">
<span class="text-[#9CDCFE] menlo text-[1.1rem]">Lit</span>
<span class="text-[#D3D3D3] menlo text-[1.1rem]">.</span>
<span class="text-[#DCDCAA] menlo text-[1.1rem]">init</span>
<span class="text-[#D3D3D3] menlo text-[1.1rem]">(</span>
<span class="text-[#CE9178] menlo text-[1.1rem]">'project_id'</span>
<span class="text-[#D3D3D3] menlo text-[1.1rem]">);</span>
<div v-if="snippetIndex == 0" class="text-[.9rem]">
<span class="text-[#808080] menlo">{{ scriptDeferTokens[0] }}</span>
<span class="text-[#569CD6] menlo">{{ scriptDeferTokens[1] }}</span>
<span class="text-[#9CDCFE] menlo">{{ scriptDeferTokens[2] }}</span>
<span class="text-[#9CDCFE] text-nowrap menlo">{{ scriptDeferTokens[3] }}</span>
<span class="text-[#D4D4D4] menlo">{{ scriptDeferTokens[4] }}</span>
<span class="text-[#CD9178] menlo">{{ scriptDeferTokens[5] }}</span>
<span class="text-[#9CDCFE] menlo">{{ scriptDeferTokens[6] }}</span>
<span class="text-[#D4D4D4] menlo">{{ scriptDeferTokens[7] }}</span>
<span class="text-[#CE9178] break-words menlo">{{ scriptDeferTokens[8] }}</span>
<span class="text-[#808080] menlo">{{ scriptDeferTokens[9] }}</span>
<span class="text-[#808080] menlo">{{ scriptDeferTokens[10] }}</span>
<span class="text-[#569CD6] menlo">{{ scriptDeferTokens[11] }}</span>
<span class="text-[#808080] menlo">{{ scriptDeferTokens[12] }}</span>
</div>
<div v-if="snippetIndex == 1" class="text-[.9rem]">
<span class="text-[#9CDCFE] menlo">Lit</span>
<span class="text-[#D3D3D3] menlo">.</span>
<span class="text-[#DCDCAA] menlo">init</span>
<span class="text-[#D3D3D3] menlo">(</span>
<span class="text-[#CE9178] menlo">'project_id'</span>
<span class="text-[#D3D3D3] menlo">);</span>
</div>
<div v-if="snippetIndex == 2" class="text-[.9rem]">
<span class="text-[#9CDCFE] menlo">Lit</span>
<span class="text-[#D3D3D3] menlo">.</span>
<span class="text-[#DCDCAA] menlo">event</span>
<span class="text-[#D3D3D3] menlo">(</span>
<span class="text-[#CE9178] menlo">'event_name'</span>
<span class="text-[#D3D3D3] menlo">);</span>
</div>
</LyxUiCard>
@@ -109,7 +166,9 @@ const email = ref<string>("");
</div>
<div class="button-container">
<LyxUiButton class="button" type="primary"> Start for free </LyxUiButton>
<LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
Start for free
</LyxUiButton>
</div>
</div>
@@ -128,7 +187,7 @@ const email = ref<string>("");
runtimes like Nuxt, Deno, Next, Vue, React and many more.
</div>
<div class="mt-8">
<div class="mt-8 flex justify-center">
<img :src="'techs-new.png'" alt="Techs">
</div>
</div>
@@ -144,8 +203,8 @@ const email = ref<string>("");
Easily connect all your databases to your dashboard like Supabase, MongoDB, Cassandra and more.
</div>
<div class="my-10">
<img :src="'db-connect.png'" alt="DB-CONNECT">
<div class="my-10 flex justify-center">
<img class="lg:h-[35rem]" :src="'db-connect.png'" alt="DB-CONNECT">
</div>
<div class="paragraph">
@@ -154,13 +213,14 @@ const email = ref<string>("");
Beautiful Charts!
</div>
<div class="mt-8">
<div class="mt-8 flex justify-center">
<img :src="'placeholder.jpg'" alt="Placeholder">
</div>
<div class="button-container">
<LyxUiButton class="button" type="outline">
<LyxUiButton link="https://dashboard.litlyx.com/live_demo" target="_blank" class="button"
type="outline">
Go to live demo
</LyxUiButton>
</div>
@@ -177,8 +237,8 @@ const email = ref<string>("");
Take metrics-driven decision with Lit our AI agent. Generate charts chatting with Lit. 
</div>
<div class="mt-8">
<img class="scale-125" :src="'ai-chat.png'" alt="Ai-Chat">
<div class="mt-8 flex justify-center">
<img class="scale-125 lg:scale-100 lg:h-[35rem]" :src="'ai-chat.png'" alt="Ai-Chat">
</div>
</div>
@@ -190,20 +250,24 @@ const email = ref<string>("");
Our users loves Litlyx's simplicity
</div>
<div class="mt-10 flex flex-col gap-4">
<Testimonial name="Victoria - CEO" sub="Founder" link-text="@DeckX" link="https://deckx.app"
<ClientOnly>
<div class="mt-10 flex flex-col gap-4 lg:grid lg:grid-cols-2">
<Testimonial class="w-full h-full" name="Victoria - CEO" sub="Founder" link-text="@DeckX"
link="https://deckx.app"
text="Just one word: WOW! Easy to use. If I need to check my metrics, I open Litlyx. I love it.">
</Testimonial>
<Testimonial name="Victoria - CEO" sub="Founder" link-text="@DeckX" link="https://deckx.app"
text="Just one word: WOW! Easy to use. If I need to check my metrics, I open Litlyx. I love it.">
<Testimonial class="w-full h-full" name="Alessio - CEO" sub="Founder" link-text="@NuvolAI"
link="https://https://nuvol.ai"
text="I instantly loved Litlyx because it is simple. I integrated their universal script in PHP; it was seamless. I will start to track events very soon!
One of my clients said to me, 'We open only Litlyx to keep an eye on referrers from our campaigns.">
</Testimonial>
<Testimonial name="Victoria - CEO" sub="Founder" link-text="@DeckX" link="https://deckx.app"
text="Just one word: WOW! Easy to use. If I need to check my metrics, I open Litlyx. I love it.">
</Testimonial>
<Testimonial name="Victoria - CEO" sub="Founder" link-text="@DeckX" link="https://deckx.app"
text="Just one word: WOW! Easy to use. If I need to check my metrics, I open Litlyx. I love it.">
<Testimonial class="w-full h-full" name="Marco - Business Owner" sub=""
link-text="@Antichi Casali Camper Shop" link="https://www.antichicasalicampershop.it"
text="We needed to track metrics, but we didn’t know what to use. Than Alessio presented us Litlyx. We was Enthusiasts and payied the 9,99 subscription. We are happy about the service they provide for our online Ecommerce selling Camper equipments.">
</Testimonial>
</div>
</ClientOnly>
</div>
@@ -221,10 +285,10 @@ const email = ref<string>("");
</div>
<div class="button-container flex-col items-center gap-4 !mt-10">
<LyxUiButton class="button" type="outline">
<LyxUiButton link="https://github.com/Litlyx/litlyx" target="_blank" class="button" type="outline">
Leave a Star on Github!
</LyxUiButton>
<LyxUiButton class="button" type="primary">
<LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
Start for free
</LyxUiButton>
</div>
@@ -242,7 +306,7 @@ const email = ref<string>("");
</div>
<div class="button-container">
<LyxUiButton class="button" type="primary">
<LyxUiButton link="/why-choose-litlyx" target="_blank" class="button" type="outline">
Read more
</LyxUiButton>
</div>
@@ -270,7 +334,7 @@ const email = ref<string>("");
</div>
</div>
</div>
</template>
@@ -303,6 +367,23 @@ const email = ref<string>("");
@apply text-center font-semibold text-[1.8rem]
}
@media (min-width: 1024px) {
.headline {
@apply text-[4rem]
}
.subtitle {
@apply text-[2.3rem]
}
.paragraph {
@apply text-[1.5rem]
}
.section {
@apply mt-32
}
}

151
landing/pages/why-choose-litlyx.vue
View File

@@ -2,10 +2,148 @@
definePageMeta({ layout: 'header' });
const comparisons = ref<any[]>([
{
feature: 'Setup Time',
litlyx: '30 seconds',
plausible: 'A few Minutes',
google: 'Hours'
},
{
feature: 'Real-Time Collection',
litlyx: 'Instant',
plausible: 'each 5 minutes',
google: 'from few minutes, to hours'
},
{
feature: 'Documentation',
litlyx: 'Small, Easy & Modern',
plausible: 'Longer than necessary',
google: 'Mstodon & Complex'
},
{
feature: 'Modern UI',
litlyx: 'Yes',
plausible: 'Yes',
google: 'Yes'
},
{
feature: 'Developers Centric Approach',
litlyx: 'Yes',
plausible: 'Partially',
google: 'No'
},
{
feature: 'Website Loading Time',
litlyx: '3 ms',
plausible: '3 ms',
google: '5-15 ms'
},
{
feature: 'Library Size',
litlyx: '3 kb',
plausible: '2 kb',
google: 'avg. 50 kb'
},
{
feature: 'Custom Events Support',
litlyx: 'Yes',
plausible: 'Yes',
google: 'Yes'
},
{
feature: 'Native Js Runtimes',
litlyx: 'Yes',
plausible: 'No',
google: 'No'
},
{
feature: 'Custom Events metadata Support',
litlyx: 'Yes',
plausible: 'No',
google: 'Limited'
},
{
feature: 'Raw Data Export',
litlyx: 'Yes',
plausible: 'No',
google: 'No'
},
{
feature: 'Data Ownership',
litlyx: 'Yes',
plausible: 'Yes',
google: 'No'
},
{
feature: 'Open-Source',
litlyx: 'Self-Hostable',
plausible: 'Self-Hostable',
google: 'No'
},
{
feature: 'Privacy-focused',
litlyx: 'Yes',
plausible: 'Yes',
google: 'No'
},
{
feature: 'Cookies Stored',
litlyx: '0 Cookies',
plausible: '0 Cookies',
google: 'Yes, many'
},
{
feature: 'EU standard',
litlyx: 'Yes',
plausible: 'Yes',
google: 'Limited'
},
{
feature: 'Ad Blockers',
litlyx: 'Impossible to block',
plausible: 'Possible, but hard!',
google: 'Possible'
},
{
feature: 'AI Data Analyst Assistant',
litlyx: 'Yes',
plausible: 'No',
google: 'No'
},
{
feature: 'Report Generation',
litlyx: 'Detailed reports in seconds',
plausible: 'Basic Reports',
google: 'Extensive, but complex to do'
},
{
feature: 'User-Friendly interface',
litlyx: 'Yes',
plausible: 'Yes',
google: 'Moderate Complexity'
},
{
feature: 'Agglomeration from third parties DB’s',
litlyx: 'Yes',
plausible: 'No',
google: 'No'
},
{
feature: 'Cost Effective (Cloud)',
litlyx: 'Free-Forever plan to start. Basic plan: €4,99/mo for 50k visits/events',
plausible: '30 days free trial. basic plan: €9,00/mo for 10k page visits',
google: 'Free forever. Offers Enterprise only Premium prices (really expansive)'
}
]);
</script>
<template>
<div class="px-8">
<div class="px-8 lg:px-40">
<div class="section">
<div class="title">
@@ -34,15 +172,8 @@ definePageMeta({ layout: 'header' });
<div class="section">
<div class="hidden lg:grid grid-cols-[20%_20%_30%_30%]">
<div> Feature </div>
<div> Litlyx </div>
<div> Plausible </div>
<div> Google Analytics </div>
<div> A </div>
<div> B </div>
<div> C </div>
<div> D </div>
<div class="hidden lg:flex lg:justify-center">
<UTable :rows="comparisons"></UTable>
</div>
<div class="lg:hidden text-lyx-text-dark">

BIN
landing/public/screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

7
lyx-ui/components/Button.vue
View File

@@ -2,17 +2,18 @@
export type ButtonType = 'primary' | 'secondary' | 'outline' | 'danger';
const props = defineProps<{ type: ButtonType, }>();
const props = defineProps<{ type: ButtonType, link?: string, target?: string }>();
</script>
<template>
<div class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{
<NuxtLink tag="div" :to="link" :target="target"
class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{
'bg-lyx-primary-dark outline-lyx-primary hover:bg-lyx-primary-hover': type === 'primary',
'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'secondary',
'bg-lyx-transparent outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'outline',
'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger',
}">
<slot></slot>
</div>
</NuxtLink>
</template>