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

new landing page ui

Browse Source
This commit is contained in:
Emily
2024-07-23 18:13:45 +02:00
parent 3eb32145aa
commit e6c9ad9470
7 changed files with 459 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
landing/app.vue
View File

@@ -17,7 +17,10 @@ useSeoMeta({
ogSiteName: 'Litlyx',
ogLocale: 'en_US',
ogImageWidth: '1200',
ogImageHeight: '630'
ogImageHeight: '630',
themeColor: '#0A0A0A',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black-translucent',
});

26
landing/components/Testimonial.vue Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts" setup>
const props = defineProps<{
name: string,
sub: string,
linkText: string,
link: string,
text: string
}>();
</script>
<template>
<LyxUiCard>
<div class="flex flex-col gap-4">
<div>
<div>{{ name }}</div>
<div>{{ sub }} <NuxtLink class="text-lyx-primary" :to="link" target="_blank">{{ linkText }}</NuxtLink>
</div>
</div>
<div>
{{ text }}
</div>
</div>
</LyxUiCard>
</template>

11
landing/layouts/header.vue
View File

@@ -123,6 +123,15 @@ nuxtApp.hook("page:finish", () => {
<div class="divider border-b border-gray-500/40"></div>
<NuxtLink @click="isMenuOpen = false" to="/why-choose-litlyx" class="flex justify-between items-center mr-2">
<div class="hover:text-text-sub/90 py-3">
Why choose Litlyx
</div>
<div> <i class="fas fa-chevron-right"></i> </div>
</NuxtLink>
<div class="divider border-b border-gray-500/40"></div>
<NuxtLink target="_blank" to="https://docs.litlyx.com"
class="flex justify-between items-center mr-2">
<div class="hover:text-text-sub/90 py-3">
@@ -141,6 +150,7 @@ nuxtApp.hook("page:finish", () => {
</NuxtLink>
<div class="divider border-b border-gray-500/40"></div>
@@ -223,6 +233,7 @@ nuxtApp.hook("page:finish", () => {
<NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx"
class="hover:text-accent cursor-pointer"> Github </NuxtLink>
<NuxtLink to="/pricing" class="hover:text-accent cursor-pointer"> Pricing </NuxtLink>
<NuxtLink to="/why-choose-litlyx" class="hover:text-accent cursor-pointer"> Why choose Litlyx </NuxtLink>
</div>
<div class="flex flex-col gap-4">
<div class="text-text-sub/60 font-semibold text-[1.3rem]"> Company </div>

321
landing/pages/index.vue
View File

@@ -29,6 +29,10 @@ const mouseStyle = computed(() => {
return `top: ${y.value - (blobSize / 2)}px; left: ${x.value - (blobSize / 2)}px; width: ${blobSize}px; height: ${blobSize}px;`
});
const email = ref<string>("");
</script>
@@ -36,19 +40,23 @@ const mouseStyle = computed(() => {
<div class="home relative h-full w-full bg-lyx-background px-8 py-10 overflow-x-hidden">
<div class="poppins font-medium text-[3rem] text-center leading-[3.5rem]">
<div class="headline">
Analytics For
<span class="text-lyx-primary"> Developers </span>
</div>
<div class="poppins text-center text-lyx-text-dark mt-4 text-[1.1rem]">
30 Seconds Setup with One Line of Code.
All Your Analytics in a Single AI Powered Dashboard.
</div>
<div class="section">
<div class="paragraph">
30 Seconds Setup with One Line of Code.
All Your Analytics in a Single AI Powered Dashboard.
</div>
<div class="button-container">
<LyxUiButton class="button" type="primary"> Start for free </LyxUiButton>
</div>
<div class="flex justify-center mt-8">
<LyxUiButton class="text-[1.2rem] px-6 py-2" type="primary"> Start for free </LyxUiButton>
</div>
<div class="mt-8">
@@ -66,144 +74,239 @@ const mouseStyle = computed(() => {
</div>
<div class="poppins text-center font-semibold text-[1.8rem] mt-20">
Collect Analytics, <br>Easy way
</div>
<div class="section">
<div class="poppins text-center mt-4 text-[1.1rem]">
More than 10 KPIs like Page Visits, Custom Events
Referrers and many more
</div>
<div class="subtitle">
Collect analytics, <br>easy way
</div>
<div class="paragraph">
More than 10 KPIs like Page Visits, Custom Events
Referrers and many more
</div>
<div class="flex justify-center items-center gap-2 text-[.8rem] mt-8">
<LyxUiButton type="secondary"> Javascript </LyxUiButton>
<LyxUiButton type="secondary"> All js runtime </LyxUiButton>
<LyxUiButton type="secondary"> Custom events </LyxUiButton>
</div>
<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>
</div>
<LyxUiCard class="w-full mt-8 bg-lyx-background py-6">
<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>
</LyxUiCard>
<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>
</LyxUiCard>
<div class="poppins text-center mt-4 text-[1.1rem]">
That’s It! You are <span class="font-bold"> Ready </span> to Collect data.
</div>
<div class="poppins text-center mt-6 text-[1.1rem]">
That’s It! You are <span class="font-bold"> Ready </span> to Collect data.
</div>
<div class="button-container">
<LyxUiButton class="button" type="primary"> Start for free </LyxUiButton>
</div>
<div class="flex justify-center mt-8">
<LyxUiButton class="text-[1.2rem] px-6 py-2" type="primary"> Start for free </LyxUiButton>
</div>
<div class="section">
<div class="subtitle">
Plug in <br> everywhere.
</div>
<div class="paragraph">
Seamless Integrations with popular
<span class="text-[#FFCA27]">JS</span>/<span class="text-[#017ACB]">TS</span>
runtimes like Nuxt, Deno, Next, Vue, React and many more.
</div>
<div class="poppins text-center font-semibold text-[1.8rem] mt-20">
Plug in <br> Everywhere.
</div>
<div class="poppins text-center mt-4 text-[1.1rem]">
Seamless Integrations with popular
<span class="text-[#FFCA27]">JS</span>/<span class="text-[#017ACB]">TS</span>
runtime like React, Angular, Vue, Node, Next and many more.
</div>
<div class="mt-8">
<img :src="'techs-new.png'" alt="Techs">
<div class="mt-8">
<img :src="'techs-new.png'" alt="Techs">
</div>
</div>
<div class="section">
<div class="subtitle">
Transform DB's data in beautiful charts
</div>
<div class="paragraph">
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>
<div class="paragraph">
We don't only collect Analytics.
We Agglomerate your Existing data! Showing
Beautiful Charts!
</div>
<div class="mt-8">
<img :src="'placeholder.jpg'" alt="Placeholder">
</div>
<div class="poppins text-center font-semibold text-[1.8rem] mt-20">
Connect DB'S In One Place with beautiful charts
</div>
<div class="poppins text-center mt-4 text-[1.1rem]">
Easily connect all your databases to your dashboard like Supabase, MongoDB, Cassandra and more.
</div>
<div class="mt-10">
<img :src="'db-connect.png'" alt="DB-CONNECT">
</div>
<div class="poppins text-center mt-10 text-[1.1rem]">
We don't only collect Analytics.
We Agglomerate your Existing data! Showing
Beautiful Charts!
</div>
<div class="mt-8">
<img :src="'placeholder.jpg'" alt="Placeholder">
<div class="button-container">
<LyxUiButton class="button" type="outline">
Go to live demo
</LyxUiButton>
</div>
</div>
<div class="flex justify-center mt-8">
<LyxUiButton class="text-[1.2rem] px-10 py-2" type="outline">
Go to Live Demo!
</LyxUiButton>
<div class="section">
<div class="subtitle">
An AI data analyst available 24/7
</div>
<div class="paragraph">
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>
</div>
<div class="section">
<div class="subtitle">
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"
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>
<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>
</div>
</div>
<div class="section">
<div class="subtitle">
Powered by <br> open-source
</div>
<div class="paragraph">
Completely self-hostable with Docker.
</div>
<div class="mt-8 flex justify-center">
<img class="w-[40%]" :src="'docker.png'" alt="Self-Host">
</div>
<div class="button-container flex-col items-center gap-4 !mt-10">
<LyxUiButton class="button" type="outline">
Leave a Star on Github!
</LyxUiButton>
<LyxUiButton class="button" type="primary">
Start for free
</LyxUiButton>
</div>
</div>
<div class="poppins text-center font-semibold text-[1.8rem] mt-20">
An AI Data Analyst Available 24/7
<div class="section">
<div class="subtitle">
Why choose Litlyx
</div>
<div class="paragraph">
Litlyx vs Plausible vs Google Analytics
</div>
<div class="button-container">
<LyxUiButton class="button" type="primary">
Read more
</LyxUiButton>
</div>
</div>
<div class="poppins text-center mt-4 text-[1.1rem]">
Take metrics-driven decision with Lit our AI agent. Generate charts chatting with Lit. 
<div class="section">
<div class="subtitle">
Update me!
</div>
<div class="paragraph">
Litlyx is in beta version. We will keep you updated with our latest news.
</div>
<div class="flex justify-center mt-8">
<LyxUiInput placeholder="Insert email" v-model="email" class="text-[1.1rem] w-full py-2 px-3">
</LyxUiInput>
</div>
<div class="button-container">
<LyxUiButton class="button" type="primary">
Keep me updated
</LyxUiButton>
</div>
</div>
<div class="mt-8">
<img :src="'ai-chat.png'" alt="Ai-Chat">
</div>
<div class="poppins text-center font-semibold text-[1.8rem] mt-20">
Our Users Loves Litlyx Semplicity
</div>
<div class="poppins text-center font-semibold text-[1.8rem] mt-20">
Powered by <br> Open-Source
</div>
<div class="poppins text-center mt-4 text-[1.1rem]">
Completely self-hostable with Docker.
</div>
<div class="mt-8">
<img :src="'selfhost.png'" alt="Self-Host">
</div>
<div class="flex justify-center flex-col gap-4 w-full items-center mt-20">
<LyxUiButton class="text-[1.2rem] px-10 py-2" type="outline">
Leave a Star on Github!
</LyxUiButton>
<LyxUiButton class="text-[1.2rem] px-10 py-2" type="primary">
Start for free
</LyxUiButton>
</div>
</div>
</template>
<style scoped lang="scss">
.section {
@apply mt-20
}
.button {
@apply font-medium text-[1rem] px-6 py-2
}
.button-container {
@apply flex justify-center mt-8
}
.headline {
font-family: 'Poppins' !important;
@apply font-semibold text-[3rem] text-center leading-[3.5rem]
}
.paragraph {
font-family: 'Poppins' !important;
@apply text-center text-lyx-text-dark mt-4 text-[1.1rem]
}
.subtitle {
font-family: 'Poppins' !important;
@apply text-center font-semibold text-[1.8rem]
}
.footer * {
font-family: "Poppins";
}

182
landing/pages/why-choose-litlyx.vue Normal file
View File

@@ -0,0 +1,182 @@
<script lang="ts" setup>
definePageMeta({ layout: 'header' });
</script>
<template>
<div class="px-8">
<div class="section">
<div class="title">
Why Choose Litlyx
</div>
<div class="paragraph">
Our product is simple and focuses on the developer's experience. Developers love free stuff, so Litlyx
offers a generous Free-Forever plan to get started. Developers don't want to waste time setting up
complex analytics to track key metrics for their websites. So, we asked ourselves, 'What would
developers find easy and cool?' As a team of developers, we created the simplest, most optimized, and
developer-friendly way to do analytics.
</div>
</div>
<div class="section">
<div class="title">
Litlyx vs Plausible vs Google Analytics Comparison Table
</div>
<div class="paragraph">
Comparisons between the most common softwares used for web analytics collection and Litlyx.
</div>
</div>
<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>
<div class="lg:hidden text-lyx-text-dark">
[Table available only on desktop]
</div>
</div>
<div class="section">
<div class="subtitle">
Google Analytics vs. Litlyx
</div>
<ul class="list-disc text-lyx-text-dark mt-4">
<li>
Ease of Use: Google Analytics can be complex, with many features that may be overwhelming when
reading its documentation. Litlyx is simple and easy to use.
</li>
<li>
Setup: Google Analytics requires more time to set up, whereas Litlyx is quick and easy to set up
(just 30 seconds).
</li>
<li>
Free Plan: Google Analytics offers a free plan, but you do not own your data. Litlyx offers a
Free-Forever plan with generous limits, and you can handle raw data.
</li>
<li>
Developer Focus: Google Analytics is for general users, with libraries written by third parties.
Litlyx is built with developers in mind, supporting all tech stacks natively.
</li>
</ul>
</div>
<div class="section">
<div class="subtitle">
Plausible vs. Litlyx <span class="text-[.9rem]">(we ❤️ Plausible)</span>
</div>
<ul class="list-disc text-lyx-text-dark mt-4">
<li>
Ease of Use: Plausible is simple and user-friendly. Litlyx is also simple and easy to use. Both
Plausible and Litlyx are awesome!
</li>
<li>
Setup: Plausible setup is quick and easy. Litlyx setup is equally quick and straightforward.
</li>
<li>
Free Plan: Plausible does not offer a free plan, giving you a 30-day free trial before you need to
pay. Litlyx offers a generous Free-Forever plan.
</li>
<li>
Developer Focus: Plausible is designed for general users with a focus on privacy, whereas Litlyx is
specifically designed for developers.
</li>
</ul>
</div>
<div class="section">
<div class="title">
Who can use Litlyx?
</div>
<div class="paragraph">
We built Litlyx with developers in mind. If you want really good metrics, you should go through your
development team. We created the simplest setup a developer can ask for, supporting all JavaScript and
TypeScript runtimes. Litlyx can be used even by startup founders or business owners who have access to
their landing page. We offer extensive support to guide you through the implementation. You can contact
us anytime for information at help@litlyx.com. With Litlyx, you will not be alone.
</div>
</div>
<div class="section">
<div class="title">
We are far from perfection...
</div>
<div class="paragraph">
We are far from perfect. We are human, and we embrace that. Our imperfections drive us to always improve
and innovate. We learn from our mistakes and use those lessons to create better solutions. By
acknowledging our humanity, we connect more deeply with our users, understanding their needs and
challenges. Our commitment to growth and improvement ensures that we constantly strive to deliver the
best possible experience for developers.
</div>
</div>
<div class="section">
<div class="title">
Is Impossible to Beat a giant, but...
</div>
<div class="paragraph">
We know we can’t compete with Google directly—it’s like trying to challenge a giant. But even giants
have weaknesses. Startups with bold ideas can find ways to disrupt the status quo and we see this many
times in history. We’re here to support all innovators by providing a first-class developer experience
with our product. Our goal is to empower every size companies to make a significant impact in the
industry taking matrics driven decisions with semplicity.
</div>
</div>
<div class="section">
<div class="title">
Help us improve!
</div>
<div class="paragraph">
If you choose us today, you can help us improve and become first-class in analytics. We can’t do this
alone; we need you! Your feedback and suggestions are very valuable to us. By working together, we can
refine our product and create an exceptional experience for developers. Join us on this journey, and
let's build something amazing together. Your input will help us reach new heights and set the standard
of excellence next-generation developers deserve.
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.title {
font-family: 'Poppins' !important;
@apply font-semibold text-[1.8rem]
}
.subtitle {
font-family: 'Poppins' !important;
@apply font-medium text-[1.4rem]
}
.paragraph {
font-family: 'Poppins' !important;
@apply text-lyx-text-dark mt-4 text-[1.1rem]
}
.section {
@apply mt-20
}
</style>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

25
lyx-ui/components/Input.vue Normal file
View File

@@ -0,0 +1,25 @@
<script lang="ts" setup>
const props = defineProps<{ placeholder?: string, modelValue: string }>();
const emits = defineEmits<{
(e: "update:modelValue", value: string): void
}>();
const handleChange = (event: Event) => {
const target = event.target as HTMLInputElement;
emits('update:modelValue', target.value);
};
//TODO: FUNCTIONALITY + PLACEHOLDER DARK
</script>
<template>
<input class="bg-lyx-widget-light text-lyx-text-dark poppins rounded-md outline outline-[1px] outline-lyx-widget-lighter" type="text"
:placeholder="props.placeholder"
:value="props.modelValue"
@input="handleChange">
</template>