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

.

Browse Source
This commit is contained in:
Emily
2024-07-22 16:31:54 +02:00
parent f3542f711b
commit 3eb32145aa
26 changed files with 8182 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
landing/pages/index.vue
View File

@@ -34,162 +34,171 @@ const mouseStyle = computed(() => {
<template>
<div class="home relative h-full w-full bg-[#151517] overflow-x-hidden">
<div class="home relative h-full w-full bg-lyx-background px-8 py-10 overflow-x-hidden">
<div class="w-full h-full fixed left-0 top-0 hidden md:flex">
<div :style="mouseStyle" class="absolute w-[30rem] h-[18rem] flex items-center justify-center z-0">
<div class="blob opacity-5"></div>
</div>
<div class="poppins font-medium text-[3rem] text-center leading-[3.5rem]">
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="absolute top-0 left-0 w-full h-full flex flex-col items-center z-0 overflow-hidden">
<HomeBgGrid :size="100" :spacing="18" opacity="0.3" class="w-fit h-fit"></HomeBgGrid>
<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">
<img :src="'placeholder.jpg'" alt="Placeholder">
</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>,
for Data collection.
</div>
<div class="flex w-full mt-20 justify-center relative z-[10]">
<div class="flex flex-col items-center justify-center gap-20 rounded-lg py-6">
<div class="poppins text-center font-bold text-text lg:leading-[5rem] text-[1.7rem] lg:text-[4rem]">
Boost Analytics Collection
<br>
with <span class="text-accent font-bold poppins"> Minimal Setup </span>
</div>
<div class="flex gap-4 flex-col lg:flex-row lg:gap-10">
<div class="flex items-center gap-2">
<i class="fas fa-check text-[1.5rem]"></i>
<div class="poppins text-[1.2rem]"> One-Line Code Setup </div>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-check text-[1.5rem]"></i>
<div class="poppins text-[1.2rem]"> 15+ Techs Supported </div>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-check text-[1.5rem]"></i>
<div class="poppins text-[1.2rem]"> High customization </div>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-check text-[1.5rem]"></i>
<div class="poppins text-[1.2rem]"> GDPR Compliance </div>
</div>
</div>
<div class="flex gap-6 items-center flex-col lg:flex-row lg:w-[80%]">
<NuxtLink to="https://dashboard.litlyx.com"
class="hover:bg-white/90 font-semibold cursor-pointer flex items-center gap-4 text-xl animated-button px-8 py-3 rounded-2xl">
<div class="flex gap-4 items-center">
<div class="poppins"> Get Started for Free </div>
<i class="fas fa-arrow-right"></i>
</div>
</NuxtLink>
<NuxtLink target="_blank" to="https://dashboard.litlyx.com/live_demo"
class="hover:bg-[#1b1b1b] justify-center font-semiboldcursor-pointer w-full flex items-center gap-4 text-xl text-bg-light px-16 py-3 rounded-2xl bg-black border-solid border-[1px] border-white/80 text-white">
<div class="poppins"> Live Demo </div>
</NuxtLink>
</div>
</div>
<div class="poppins text-center font-semibold text-[1.8rem] mt-20">
Collect Analytics, <br>Easy way
</div>
<div class="flex justify-center mt-10 z-[10] relative">
<div class="bg-[#1d1d1f] rounded-[1rem] overflow-hidden w-[96%] lg:w-[60%] ">
<img :src="'screen_1.png'" alt="Litlyx dashboard" class="">
</div>
<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="flex justify-center mt-20 z-[10] relative items-center flex-col gap-2">
<div class="poppins text-[1.2rem]"> Trusted by</div>
<NuxtLink to="https://nuvol.ai/" target="_blank" class="max-w-[18rem] bg-text-sub p-4 rounded-lg">
<img class="w-full h-full" alt="Partner_1" :src="'nuvolai.png'">
</NuxtLink>
<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 mt-20 z-[10] relative items-center flex-col gap-6">
<Code></Code>
<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>
<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="flex justify-center mt-8">
<LyxUiButton class="text-[1.2rem] px-6 py-2" type="primary"> Start for free </LyxUiButton>
</div>
<div class="flex justify-center mt-40 z-[10] relative items-center flex-col gap-6">
<div class="poppins font-bold text-text text-center text-[2.2rem] lg:text-[3rem]">
+15 Supported technologies
</div>
<div class="poppins text-[1.2rem] text-text-sub text-center w-[90%] lg:w-[40%]">
Seamless Integrations with popular JS/TS frameworks, including React, Angular, Vue, Node, Next and many
more.
</div>
<div class="flex flex-wrap justify-center py-10 lg:gap-8 lg:px-20">
<HomeTechCard name="Node.js" icon="tech/4.png"></HomeTechCard>
<HomeTechCard name="React" icon="tech/15.png"></HomeTechCard>
<HomeTechCard name="Vue.js" icon="tech/8.png"></HomeTechCard>
<HomeTechCard name="Next.js" icon="tech/7.png"></HomeTechCard>
<HomeTechCard name="Nuxt" icon="tech/12.png"></HomeTechCard>
<HomeTechCard name="Angular" icon="tech/9.png"></HomeTechCard>
<HomeTechCard name="Firebase" icon="tech/1.png"></HomeTechCard>
<HomeTechCard name="NestJS" icon="tech/2.png"></HomeTechCard>
<HomeTechCard name="Deno" icon="tech/11.png"></HomeTechCard>
<HomeTechCard name="Lambda" icon="tech/14.png"></HomeTechCard>
<HomeTechCard name="Fastify" icon="tech/5.png"></HomeTechCard>
<HomeTechCard name="Netlify" icon="tech/13.png"></HomeTechCard>
<HomeTechCard name="Bun" icon="tech/3.png"></HomeTechCard>
<HomeTechCard name="Svelte" icon="tech/6.png"></HomeTechCard>
<HomeTechCard name="Solid" icon="tech/10.png"></HomeTechCard>
</div>
<div class="poppins text-center font-semibold text-[1.8rem] mt-20">
Plug in <br> Everywhere.
</div>
<div class="flex justify-center mt-40 z-[10] relative items-center flex-col gap-6">
<OpenSource></OpenSource>
<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>
<div class="flex justify-center mt-20 z-[10] relative items-center flex-col gap-6">
<Analyst></Analyst>
<div class="poppins text-center font-semibold text-[1.8rem] mt-20">
Connect DB'S In One Place with beautiful charts
</div>
<!-- <div class="flex justify-center mt-20 z-[10] relative items-center flex-col gap-6">
<Testimonials>
</Testimonials>
</div> -->
<div class="flex justify-center mt-40 z-[10] relative items-center flex-col gap-6">
<div class="poppins font-bold text-[2.2rem] lg:text-[3rem] text-text"> Why Choose Litlyx </div>
<div ref="autoscroll"
class="flex gap-8 flex-row lg:flex-col overflow-x-auto overflow-y-hidden lg:overflow-hidden w-full hide-scroll px-6">
<div class="flex justify-center gap-8">
<HomeCard title="1-Minute Setup" text="Effortlessly set up and start collecting KPIs in seconds."
icon="far fa-clock">
</HomeCard>
<HomeCard title="Real-Time Insights" text="Immediately visualize visits & events on your Dashboard."
icon="far fa-line-chart">
</HomeCard>
<HomeCard title="Custom Events" text="Tailor your user experience tracking with custom events."
icon="far fa-tools">
</HomeCard>
</div>
<div class="flex justify-center gap-8">
<HomeCard title="Start for Free" text="Try Litlyx with 3k FREE Visits & Events for your website."
icon="far fa-gift">
</HomeCard>
<HomeCard title="Open-Source" text="Litlyx is transparent, Self-Hostable & Open-Source."
icon="far fa-globe">
</HomeCard>
<HomeCard title="Cost-Effective" text="Get more for less with Litlyx, without breaking the bank."
icon="far fa-wallet">
</HomeCard>
</div>
</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>
<div class="flex justify-center mt-8">
<LyxUiButton class="text-[1.2rem] px-10 py-2" type="outline">
Go to Live Demo!
</LyxUiButton>
</div>
<div class="poppins text-center font-semibold text-[1.8rem] mt-20">
An AI Data Analyst Available 24/7
</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="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>