mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 07:48:37 +01:00
new landing page ui
This commit is contained in:
Emily
@@ -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>
|
||||
<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 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
182
landing/pages/why-choose-litlyx.vue
Normal 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>
|
||||
Reference in New Issue
Block a user