Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-09 23:48:36 +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

2
landing/app.vue
View File

@@ -25,7 +25,7 @@ useSeoMeta({
<template>
<div class="w-dvw h-dvh bg-[#151517]">
<div class="w-dvw h-dvh bg-lyx-background">
<NuxtLayout>
<NuxtPage></NuxtPage>
</NuxtLayout>

BIN
landing/assets/menlo/Menlo-Regular.woff Normal file
View File

Binary file not shown.

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

@@ -11,6 +11,17 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');
@font-face {
font-family: 'Menlo Regular';
font-style: normal;
font-weight: normal;
src: local('../menlo/Menlo-Regular.woff'), url('../menlo/Menlo-Regular.woff') format('woff');
}
.menlo {
font-family: "Menlo Regular";
}
.fas,
.far,
.fat {

2
landing/nuxt.config.ts
View File

@@ -29,4 +29,6 @@ export default defineNuxtConfig({
devServer: {
host: '0.0.0.0',
},
components: true,
extends: ['../lyx-ui']
})

259
landing/pages/index.vue
View File

@@ -34,160 +34,169 @@ 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 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 class="poppins text-center font-semibold text-[1.8rem] mt-20">
Collect Analytics, <br>Easy way
</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>
<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="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="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 class="mt-10">
<img :src="'db-connect.png'" alt="DB-CONNECT">
</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 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>

BIN
landing/public/ai-chat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
landing/public/db-connect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
landing/public/placeholder.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
landing/public/techs-new.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

42
landing/tailwind.config.js
View File

@@ -19,7 +19,49 @@ module.exports = {
light: '#2c91ed',
sub: '#99A7F1',
},
"lyx-primary": {
DEFAULT: '#5680F8',
dark: '#222A42',
hover: '#2A3450'
},
"lyx-text": {
DEFAULT: '#FFFFFF',
dark: '#D4D4D4',
darker: '#6A6A6A'
},
"lyx-widget": {
DEFAULT: '#151515',
light: '#1E1E1E',
lighter: '#262626'
},
"lyx-background": {
DEFAULT: '#0A0A0A',
light: '#121212',
lighter: '#212121'
},
"lyx-danger": {
DEFAULT: '#F86956',
dark: '#4A2D29'
},
"lyx-chart": {
purple: {
DEFAULT: '#5655D7',
dark: '#282844'
},
green: {
DEFAULT: '#1D9B86',
dark: '#213734'
},
cyan: {
DEFAULT: '#4ABDE8',
dark: '#273D48'
},
orange: {
DEFAULT: '#F56524',
dark: '#492C22'
}
}
},
},
},
plugins: [],

24
lyx-ui/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist
# Node dependencies
node_modules
# Logs
logs
*.log
# Misc
.DS_Store
.fleet
.idea
# Local env files
.env
.env.*
!.env.example

75
lyx-ui/README.md Normal file
View File

@@ -0,0 +1,75 @@
# Nuxt 3 Minimal Starter
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install the dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

12
lyx-ui/app.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="p-10 bg-gray-700">
<LyxUiCard>
<div class="flex gap-4 items-center">
<LyxUiButton type="primary"> primary </LyxUiButton>
<LyxUiButton type="secondary"> secondary </LyxUiButton>
<LyxUiButton type="outline"> outline </LyxUiButton>
<LyxUiButton type="danger"> danger </LyxUiButton>
</div>
</LyxUiCard>
</div>
</template>

9
lyx-ui/assets/lyxui.scss Normal file
View File

@@ -0,0 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.poppins {
font-family: 'Poppins' !important;
}
* {
font-family: 'Nunito';
}

18
lyx-ui/components/Button.vue Normal file
View File

@@ -0,0 +1,18 @@
<script lang="ts" setup>
export type ButtonType = 'primary' | 'secondary' | 'outline' | 'danger';
const props = defineProps<{ type: ButtonType, }>();
</script>
<template>
<div 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>
</template>

10
lyx-ui/components/Card.vue Normal file
View File

@@ -0,0 +1,10 @@
<script lang="ts" setup>
</script>
<template>
<div class="w-fit h-fit rounded-md bg-lyx-widget p-4 outline outline-[1px] outline-lyx-background-lighter">
<slot></slot>
</div>
</template>

11
lyx-ui/components/Icon.vue Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts" setup>
const props = defineProps<{ icon: string }>();
</script>
<template>
<span class="material-symbols-outlined">
{{ props.icon }}
</span>
</template>

26
lyx-ui/components/ProjectSelector.vue Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts" setup>
</script>
<template>
<LyxUiCard>
<div class="flex items-center">
<div class="grow">
PROJECT_NAME
</div>
<div>
Active
</div>
<LyxUiIcon icon="drag_indicator"></LyxUiIcon>
</div>
<div class="flex items-center">
<LyxUiButton type="primary">
CURRENT_SUBSCRIPTION
</LyxUiButton>
<div class="poppins font-light text-lyx-text-dark">
next billing: NEXT_BILLING_DATE
</div>
</div>
</LyxUiCard>
</template>

14
lyx-ui/nuxt.config.ts Normal file
View File

@@ -0,0 +1,14 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
import path from 'path';
export default defineNuxtConfig({
css: [path.join(__dirname, './assets/lyxui.scss')],
modules: ['@nuxt/ui'],
components: [
{
path: './components',
prefix: 'LyxUi'
},
]
})

18
lyx-ui/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@nuxt/ui": "^2.17.0",
"nuxt": "^3.12.4",
"sass": "^1.77.8",
"vue": "latest"
}
}

7708
lyx-ui/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
lyx-ui/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

3
lyx-ui/server/tsconfig.json Normal file
View File

@@ -0,0 +1,3 @@
{
"extends": "../.nuxt/tsconfig.server.json"
}

53
lyx-ui/tailwind.config.js Normal file
View File

@@ -0,0 +1,53 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {
colors: {
"lyx-primary": {
DEFAULT: '#5680F8',
dark: '#222A42',
hover: '#2A3450'
},
"lyx-text": {
DEFAULT: '#FFFFFF',
dark: '#D4D4D4',
darker: '#6A6A6A'
},
"lyx-widget": {
DEFAULT: '#151515',
light: '#1E1E1E',
lighter: '#262626'
},
"lyx-background": {
DEFAULT: '#0A0A0A',
light: '#121212',
lighter: '#212121'
},
"lyx-danger": {
DEFAULT: '#F86956',
dark: '#4A2D29'
},
"lyx-chart": {
purple: {
DEFAULT: '#5655D7',
dark: '#282844'
},
green: {
DEFAULT: '#1D9B86',
dark: '#213734'
},
cyan: {
DEFAULT: '#4ABDE8',
dark: '#273D48'
},
orange: {
DEFAULT: '#F56524',
dark: '#492C22'
}
}
},
},
},
plugins: [],
}

4
lyx-ui/tsconfig.json Normal file
View File

@@ -0,0 +1,4 @@
{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json"
}