mirror of
https://github.com/Litlyx/litlyx
synced 2026-02-04 14:42:19 +01:00
removed old dirs + start dockerfile unification
This commit is contained in:
Emily
@@ -1,51 +1,8 @@
|
||||
|
||||
# Broker
|
||||
broker/node_modules
|
||||
broker/scripts/start_dev.js
|
||||
broker/ecosystem.config.cjs
|
||||
broker/ecosystem.config.example.cjs
|
||||
broker/Dockerfile
|
||||
broker/.gitignore
|
||||
broker/dist
|
||||
|
||||
# Producer
|
||||
producer/node_modules
|
||||
producer/scripts/start_dev.js
|
||||
producer/ecosystem.config.cjs
|
||||
producer/ecosystem.config.example.cjs
|
||||
producer/Dockerfile
|
||||
producer/.gitignore
|
||||
producer/dist
|
||||
|
||||
# Dashboard
|
||||
dashboard/node_modules
|
||||
dashboard/.nuxt
|
||||
dashboard/.output
|
||||
dashboard/tests
|
||||
dashboard/.env.example
|
||||
dashboard/.env
|
||||
dashboard/.gitignore
|
||||
dashboard/ecosystem.config.cjs
|
||||
dashboard/out.pdf
|
||||
dashboard/timeline.report.txt
|
||||
dashboard/Dockerfile
|
||||
dashboard/vitest.config.ts
|
||||
dashboard/vitest.setup.ts
|
||||
|
||||
# Shared
|
||||
shared/node_modules
|
||||
shared/.gitignore
|
||||
|
||||
# Others
|
||||
docs/*
|
||||
landing/*
|
||||
docker/*
|
||||
dev/*
|
||||
assets/*
|
||||
CODE_OF_CONDUCT.md
|
||||
LICENSE
|
||||
readme.md
|
||||
SECURITY.md
|
||||
steps
|
||||
docker-compose.yml
|
||||
docker-compose.admin.yml
|
||||
# Consumer
|
||||
**/node_modules
|
||||
**/ecosystem.config.cjs
|
||||
**/ecosystem.config.example.cjs
|
||||
**/dist
|
||||
**/.nuxt
|
||||
**/.env
|
||||
28
Dockerfile
Normal file
28
Dockerfile
Normal file
@@ -0,0 +1,28 @@
|
||||
FROM node:21-alpine as base
|
||||
|
||||
FROM base as build
|
||||
|
||||
RUN npm i -g pnpm
|
||||
|
||||
# COPY --link dashboard/package.json dashboard/pnpm-lock.yaml ./
|
||||
# RUN npm install --production=false
|
||||
|
||||
WORKDIR /home/app
|
||||
|
||||
COPY --link dashboard ./dashboard
|
||||
COPY --link lyx-ui ./lyx-ui
|
||||
COPY --link consumer ./consumer
|
||||
COPY --link producer ./producer
|
||||
COPY --link shared ./shared
|
||||
|
||||
WORKDIR /home/app/dashboard
|
||||
RUN pnpm install
|
||||
|
||||
WORKDIR /home/app/consumer
|
||||
RUN pnpm install
|
||||
|
||||
WORKDIR /home/app/producer
|
||||
RUN pnpm install
|
||||
|
||||
|
||||
# CMD [ "node", "/home/app/.output/server/index.mjs" ]
|
||||
@@ -1,34 +0,0 @@
|
||||
ARG NODE_VERSION=21
|
||||
|
||||
FROM node:${NODE_VERSION}-alpine as base
|
||||
|
||||
ENV NODE_ENV=production
|
||||
|
||||
# Build stage
|
||||
|
||||
WORKDIR /home/app
|
||||
|
||||
FROM base as build
|
||||
|
||||
COPY --link dashboard/package.json dashboard/pnpm-lock.yaml ./
|
||||
RUN npm install --production=false
|
||||
|
||||
COPY --link dashboard/ ./
|
||||
|
||||
COPY --link shared/ /home/shared
|
||||
|
||||
ARG GOOGLE_AUTH_CLIENT_ID
|
||||
ENV GOOGLE_AUTH_CLIENT_ID=$GOOGLE_AUTH_CLIENT_ID
|
||||
|
||||
RUN npm run build
|
||||
RUN npm prune
|
||||
|
||||
# Final stage
|
||||
|
||||
FROM base
|
||||
|
||||
COPY --from=build /home/app /home/app
|
||||
|
||||
EXPOSE ${PORT}
|
||||
|
||||
CMD [ "node", "/home/app/.output/server/index.mjs" ]
|
||||
26
landing/.gitignore
vendored
26
landing/.gitignore
vendored
@@ -1,26 +0,0 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
package-lock.json
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
@@ -1,75 +0,0 @@
|
||||
# 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.
|
||||
@@ -1,37 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
useSeoMeta({
|
||||
title: 'Litlyx - One-Line Code Lightweight Analytics | AI Powered Analytics Dashboard',
|
||||
ogTitle: 'Litlyx - One-Line Code Lightweight Analytics | AI Powered Analytics Dashboard',
|
||||
description: 'Track over 10 KPIs effortlessly with Litlyx. One line of code, open-source, lightweight, custom events, AI Data-Analyst at your service and affordable. Start for free!',
|
||||
ogDescription: 'Track over 10 KPIs effortlessly with Litlyx. One line of code, open-source, lightweight, custom events, AI Data-Analyst at your service and affordable. Start for free!',
|
||||
keywords: 'Litlyx, analytics tracking, real-time analytics, open-source analytics, minimal setup, KPI tracking, one line of code, high customization, AI data analyst assistant, report generation, user-friendly analytics, business intelligence, data visualization, performance metrics, customizable dashboards, data insights, seamless integration, powerful analytics',
|
||||
author: 'Litlyx',
|
||||
ogImage: 'https://litlyx.com/ogimage.jpg',
|
||||
ogType: 'website',
|
||||
ogUrl: 'https://litlyx.com',
|
||||
twitterCard: 'summary_large_image',
|
||||
twitterTitle: 'Litlyx - One-Line Code Lightweight Analytics | AI Powered Analytics Dashboard',
|
||||
twitterDescription: 'Track over 10 KPIs effortlessly with Litlyx. One line of code, open-source, lightweight, custom events, AI Data-Analyst at your service and affordable. Start for free!',
|
||||
twitterImage: 'https://litlyx.com/ogimage.jpg',
|
||||
ogSiteName: 'Litlyx',
|
||||
ogLocale: 'en_US',
|
||||
ogImageWidth: '1200',
|
||||
ogImageHeight: '630',
|
||||
themeColor: '#0A0A0A',
|
||||
appleMobileWebAppCapable: 'yes',
|
||||
appleMobileWebAppStatusBarStyle: 'black-translucent',
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="w-dvw h-dvh bg-lyx-background">
|
||||
<NuxtLayout>
|
||||
<NuxtPage></NuxtPage>
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
27846
landing/assets/font-awesome/css/all.css
vendored
27846
landing/assets/font-awesome/css/all.css
vendored
File diff suppressed because it is too large
Load Diff
12
landing/assets/font-awesome/css/all.min.css
vendored
12
landing/assets/font-awesome/css/all.min.css
vendored
File diff suppressed because one or more lines are too long
1573
landing/assets/font-awesome/css/brands.css
vendored
1573
landing/assets/font-awesome/css/brands.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
12841
landing/assets/font-awesome/css/duotone.css
vendored
12841
landing/assets/font-awesome/css/duotone.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
13336
landing/assets/font-awesome/css/fontawesome.css
vendored
13336
landing/assets/font-awesome/css/fontawesome.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
19
landing/assets/font-awesome/css/light.css
vendored
19
landing/assets/font-awesome/css/light.css
vendored
@@ -1,19 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-style-family-classic: 'Font Awesome 6 Pro';
|
||||
--fa-font-light: normal 300 1em/1 'Font Awesome 6 Pro'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.ttf") format("truetype"); }
|
||||
|
||||
.fal,
|
||||
.fa-light {
|
||||
font-weight: 300; }
|
||||
@@ -1,6 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-light:normal 300 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:300;font-display:block;src:url(../webfonts/fa-light-300.woff2) format("woff2"),url(../webfonts/fa-light-300.ttf) format("truetype")}.fa-light,.fal{font-weight:300}
|
||||
19
landing/assets/font-awesome/css/regular.css
vendored
19
landing/assets/font-awesome/css/regular.css
vendored
@@ -1,19 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-style-family-classic: 'Font Awesome 6 Pro';
|
||||
--fa-font-regular: normal 400 1em/1 'Font Awesome 6 Pro'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
|
||||
|
||||
.far,
|
||||
.fa-regular {
|
||||
font-weight: 400; }
|
||||
@@ -1,6 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}
|
||||
19
landing/assets/font-awesome/css/sharp-light.css
vendored
19
landing/assets/font-awesome/css/sharp-light.css
vendored
@@ -1,19 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-style-family-sharp: 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-light: normal 300 1em/1 'Font Awesome 6 Sharp'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-sharp-light-300.woff2") format("woff2"), url("../webfonts/fa-sharp-light-300.ttf") format("truetype"); }
|
||||
|
||||
.fasl,
|
||||
.fa-light {
|
||||
font-weight: 300; }
|
||||
@@ -1,6 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-sharp:"Font Awesome 6 Sharp";--fa-font-sharp-light:normal 300 1em/1 "Font Awesome 6 Sharp"}@font-face{font-family:"Font Awesome 6 Sharp";font-style:normal;font-weight:300;font-display:block;src:url(../webfonts/fa-sharp-light-300.woff2) format("woff2"),url(../webfonts/fa-sharp-light-300.ttf) format("truetype")}.fa-light,.fasl{font-weight:300}
|
||||
@@ -1,19 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-style-family-sharp: 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-regular: normal 400 1em/1 'Font Awesome 6 Sharp'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-sharp-regular-400.woff2") format("woff2"), url("../webfonts/fa-sharp-regular-400.ttf") format("truetype"); }
|
||||
|
||||
.fasr,
|
||||
.fa-regular {
|
||||
font-weight: 400; }
|
||||
@@ -1,6 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-sharp:"Font Awesome 6 Sharp";--fa-font-sharp-regular:normal 400 1em/1 "Font Awesome 6 Sharp"}@font-face{font-family:"Font Awesome 6 Sharp";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-sharp-regular-400.woff2) format("woff2"),url(../webfonts/fa-sharp-regular-400.ttf) format("truetype")}.fa-regular,.fasr{font-weight:400}
|
||||
19
landing/assets/font-awesome/css/sharp-solid.css
vendored
19
landing/assets/font-awesome/css/sharp-solid.css
vendored
@@ -1,19 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-style-family-sharp: 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-sharp-solid-900.woff2") format("woff2"), url("../webfonts/fa-sharp-solid-900.ttf") format("truetype"); }
|
||||
|
||||
.fass,
|
||||
.fa-solid {
|
||||
font-weight: 900; }
|
||||
@@ -1,6 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-sharp:"Font Awesome 6 Sharp";--fa-font-sharp-solid:normal 900 1em/1 "Font Awesome 6 Sharp"}@font-face{font-family:"Font Awesome 6 Sharp";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-sharp-solid-900.woff2) format("woff2"),url(../webfonts/fa-sharp-solid-900.ttf) format("truetype")}.fa-solid,.fass{font-weight:900}
|
||||
19
landing/assets/font-awesome/css/sharp-thin.css
vendored
19
landing/assets/font-awesome/css/sharp-thin.css
vendored
@@ -1,19 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-style-family-sharp: 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-thin: normal 100 1em/1 'Font Awesome 6 Sharp'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-sharp-thin-100.woff2") format("woff2"), url("../webfonts/fa-sharp-thin-100.ttf") format("truetype"); }
|
||||
|
||||
.fast,
|
||||
.fa-thin {
|
||||
font-weight: 100; }
|
||||
@@ -1,6 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-sharp:"Font Awesome 6 Sharp";--fa-font-sharp-thin:normal 100 1em/1 "Font Awesome 6 Sharp"}@font-face{font-family:"Font Awesome 6 Sharp";font-style:normal;font-weight:100;font-display:block;src:url(../webfonts/fa-sharp-thin-100.woff2) format("woff2"),url(../webfonts/fa-sharp-thin-100.ttf) format("truetype")}.fa-thin,.fast{font-weight:100}
|
||||
19
landing/assets/font-awesome/css/solid.css
vendored
19
landing/assets/font-awesome/css/solid.css
vendored
@@ -1,19 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-style-family-classic: 'Font Awesome 6 Pro';
|
||||
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Pro'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
|
||||
|
||||
.fas,
|
||||
.fa-solid {
|
||||
font-weight: 900; }
|
||||
@@ -1,6 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}
|
||||
640
landing/assets/font-awesome/css/svg-with-js.css
vendored
640
landing/assets/font-awesome/css/svg-with-js.css
vendored
@@ -1,640 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Solid';
|
||||
--fa-font-regular: normal 400 1em/1 'Font Awesome 6 Regular';
|
||||
--fa-font-light: normal 300 1em/1 'Font Awesome 6 Light';
|
||||
--fa-font-thin: normal 100 1em/1 'Font Awesome 6 Thin';
|
||||
--fa-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
|
||||
--fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-regular: normal 400 1em/1 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-light: normal 300 1em/1 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-thin: normal 100 1em/1 'Font Awesome 6 Sharp';
|
||||
--fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; }
|
||||
|
||||
svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
|
||||
overflow: visible;
|
||||
box-sizing: content-box; }
|
||||
|
||||
.svg-inline--fa {
|
||||
display: var(--fa-display, inline-block);
|
||||
height: 1em;
|
||||
overflow: visible;
|
||||
vertical-align: -.125em; }
|
||||
.svg-inline--fa.fa-2xs {
|
||||
vertical-align: 0.1em; }
|
||||
.svg-inline--fa.fa-xs {
|
||||
vertical-align: 0em; }
|
||||
.svg-inline--fa.fa-sm {
|
||||
vertical-align: -0.07143em; }
|
||||
.svg-inline--fa.fa-lg {
|
||||
vertical-align: -0.2em; }
|
||||
.svg-inline--fa.fa-xl {
|
||||
vertical-align: -0.25em; }
|
||||
.svg-inline--fa.fa-2xl {
|
||||
vertical-align: -0.3125em; }
|
||||
.svg-inline--fa.fa-pull-left {
|
||||
margin-right: var(--fa-pull-margin, 0.3em);
|
||||
width: auto; }
|
||||
.svg-inline--fa.fa-pull-right {
|
||||
margin-left: var(--fa-pull-margin, 0.3em);
|
||||
width: auto; }
|
||||
.svg-inline--fa.fa-li {
|
||||
width: var(--fa-li-width, 2em);
|
||||
top: 0.25em; }
|
||||
.svg-inline--fa.fa-fw {
|
||||
width: var(--fa-fw-width, 1.25em); }
|
||||
|
||||
.fa-layers svg.svg-inline--fa {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0; }
|
||||
|
||||
.fa-layers-text, .fa-layers-counter {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
text-align: center; }
|
||||
|
||||
.fa-layers {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: -.125em;
|
||||
width: 1em; }
|
||||
.fa-layers svg.svg-inline--fa {
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center; }
|
||||
|
||||
.fa-layers-text {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center; }
|
||||
|
||||
.fa-layers-counter {
|
||||
background-color: var(--fa-counter-background-color, #ff253a);
|
||||
border-radius: var(--fa-counter-border-radius, 1em);
|
||||
box-sizing: border-box;
|
||||
color: var(--fa-inverse, #fff);
|
||||
line-height: var(--fa-counter-line-height, 1);
|
||||
max-width: var(--fa-counter-max-width, 5em);
|
||||
min-width: var(--fa-counter-min-width, 1.5em);
|
||||
overflow: hidden;
|
||||
padding: var(--fa-counter-padding, 0.25em 0.5em);
|
||||
right: var(--fa-right, 0);
|
||||
text-overflow: ellipsis;
|
||||
top: var(--fa-top, 0);
|
||||
-webkit-transform: scale(var(--fa-counter-scale, 0.25));
|
||||
transform: scale(var(--fa-counter-scale, 0.25));
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right; }
|
||||
|
||||
.fa-layers-bottom-right {
|
||||
bottom: var(--fa-bottom, 0);
|
||||
right: var(--fa-right, 0);
|
||||
top: auto;
|
||||
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
|
||||
transform: scale(var(--fa-layers-scale, 0.25));
|
||||
-webkit-transform-origin: bottom right;
|
||||
transform-origin: bottom right; }
|
||||
|
||||
.fa-layers-bottom-left {
|
||||
bottom: var(--fa-bottom, 0);
|
||||
left: var(--fa-left, 0);
|
||||
right: auto;
|
||||
top: auto;
|
||||
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
|
||||
transform: scale(var(--fa-layers-scale, 0.25));
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left; }
|
||||
|
||||
.fa-layers-top-right {
|
||||
top: var(--fa-top, 0);
|
||||
right: var(--fa-right, 0);
|
||||
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
|
||||
transform: scale(var(--fa-layers-scale, 0.25));
|
||||
-webkit-transform-origin: top right;
|
||||
transform-origin: top right; }
|
||||
|
||||
.fa-layers-top-left {
|
||||
left: var(--fa-left, 0);
|
||||
right: auto;
|
||||
top: var(--fa-top, 0);
|
||||
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
|
||||
transform: scale(var(--fa-layers-scale, 0.25));
|
||||
-webkit-transform-origin: top left;
|
||||
transform-origin: top left; }
|
||||
|
||||
.fa-1x {
|
||||
font-size: 1em; }
|
||||
|
||||
.fa-2x {
|
||||
font-size: 2em; }
|
||||
|
||||
.fa-3x {
|
||||
font-size: 3em; }
|
||||
|
||||
.fa-4x {
|
||||
font-size: 4em; }
|
||||
|
||||
.fa-5x {
|
||||
font-size: 5em; }
|
||||
|
||||
.fa-6x {
|
||||
font-size: 6em; }
|
||||
|
||||
.fa-7x {
|
||||
font-size: 7em; }
|
||||
|
||||
.fa-8x {
|
||||
font-size: 8em; }
|
||||
|
||||
.fa-9x {
|
||||
font-size: 9em; }
|
||||
|
||||
.fa-10x {
|
||||
font-size: 10em; }
|
||||
|
||||
.fa-2xs {
|
||||
font-size: 0.625em;
|
||||
line-height: 0.1em;
|
||||
vertical-align: 0.225em; }
|
||||
|
||||
.fa-xs {
|
||||
font-size: 0.75em;
|
||||
line-height: 0.08333em;
|
||||
vertical-align: 0.125em; }
|
||||
|
||||
.fa-sm {
|
||||
font-size: 0.875em;
|
||||
line-height: 0.07143em;
|
||||
vertical-align: 0.05357em; }
|
||||
|
||||
.fa-lg {
|
||||
font-size: 1.25em;
|
||||
line-height: 0.05em;
|
||||
vertical-align: -0.075em; }
|
||||
|
||||
.fa-xl {
|
||||
font-size: 1.5em;
|
||||
line-height: 0.04167em;
|
||||
vertical-align: -0.125em; }
|
||||
|
||||
.fa-2xl {
|
||||
font-size: 2em;
|
||||
line-height: 0.03125em;
|
||||
vertical-align: -0.1875em; }
|
||||
|
||||
.fa-fw {
|
||||
text-align: center;
|
||||
width: 1.25em; }
|
||||
|
||||
.fa-ul {
|
||||
list-style-type: none;
|
||||
margin-left: var(--fa-li-margin, 2.5em);
|
||||
padding-left: 0; }
|
||||
.fa-ul > li {
|
||||
position: relative; }
|
||||
|
||||
.fa-li {
|
||||
left: calc(var(--fa-li-width, 2em) * -1);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: var(--fa-li-width, 2em);
|
||||
line-height: inherit; }
|
||||
|
||||
.fa-border {
|
||||
border-color: var(--fa-border-color, #eee);
|
||||
border-radius: var(--fa-border-radius, 0.1em);
|
||||
border-style: var(--fa-border-style, solid);
|
||||
border-width: var(--fa-border-width, 0.08em);
|
||||
padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }
|
||||
|
||||
.fa-pull-left {
|
||||
float: left;
|
||||
margin-right: var(--fa-pull-margin, 0.3em); }
|
||||
|
||||
.fa-pull-right {
|
||||
float: right;
|
||||
margin-left: var(--fa-pull-margin, 0.3em); }
|
||||
|
||||
.fa-beat {
|
||||
-webkit-animation-name: fa-beat;
|
||||
animation-name: fa-beat;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
|
||||
animation-timing-function: var(--fa-animation-timing, ease-in-out); }
|
||||
|
||||
.fa-bounce {
|
||||
-webkit-animation-name: fa-bounce;
|
||||
animation-name: fa-bounce;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
|
||||
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }
|
||||
|
||||
.fa-fade {
|
||||
-webkit-animation-name: fa-fade;
|
||||
animation-name: fa-fade;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
|
||||
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
|
||||
|
||||
.fa-beat-fade {
|
||||
-webkit-animation-name: fa-beat-fade;
|
||||
animation-name: fa-beat-fade;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
|
||||
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
|
||||
|
||||
.fa-flip {
|
||||
-webkit-animation-name: fa-flip;
|
||||
animation-name: fa-flip;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
|
||||
animation-timing-function: var(--fa-animation-timing, ease-in-out); }
|
||||
|
||||
.fa-shake {
|
||||
-webkit-animation-name: fa-shake;
|
||||
animation-name: fa-shake;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, linear);
|
||||
animation-timing-function: var(--fa-animation-timing, linear); }
|
||||
|
||||
.fa-spin {
|
||||
-webkit-animation-name: fa-spin;
|
||||
animation-name: fa-spin;
|
||||
-webkit-animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 2s);
|
||||
animation-duration: var(--fa-animation-duration, 2s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, linear);
|
||||
animation-timing-function: var(--fa-animation-timing, linear); }
|
||||
|
||||
.fa-spin-reverse {
|
||||
--fa-animation-direction: reverse; }
|
||||
|
||||
.fa-pulse,
|
||||
.fa-spin-pulse {
|
||||
-webkit-animation-name: fa-spin;
|
||||
animation-name: fa-spin;
|
||||
-webkit-animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
-webkit-animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
-webkit-animation-timing-function: var(--fa-animation-timing, steps(8));
|
||||
animation-timing-function: var(--fa-animation-timing, steps(8)); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fa-beat,
|
||||
.fa-bounce,
|
||||
.fa-fade,
|
||||
.fa-beat-fade,
|
||||
.fa-flip,
|
||||
.fa-pulse,
|
||||
.fa-shake,
|
||||
.fa-spin,
|
||||
.fa-spin-pulse {
|
||||
-webkit-animation-delay: -1ms;
|
||||
animation-delay: -1ms;
|
||||
-webkit-animation-duration: 1ms;
|
||||
animation-duration: 1ms;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
-webkit-transition-delay: 0s;
|
||||
transition-delay: 0s;
|
||||
-webkit-transition-duration: 0s;
|
||||
transition-duration: 0s; } }
|
||||
|
||||
@-webkit-keyframes fa-beat {
|
||||
0%, 90% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
45% {
|
||||
-webkit-transform: scale(var(--fa-beat-scale, 1.25));
|
||||
transform: scale(var(--fa-beat-scale, 1.25)); } }
|
||||
|
||||
@keyframes fa-beat {
|
||||
0%, 90% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
45% {
|
||||
-webkit-transform: scale(var(--fa-beat-scale, 1.25));
|
||||
transform: scale(var(--fa-beat-scale, 1.25)); } }
|
||||
|
||||
@-webkit-keyframes fa-bounce {
|
||||
0% {
|
||||
-webkit-transform: scale(1, 1) translateY(0);
|
||||
transform: scale(1, 1) translateY(0); }
|
||||
10% {
|
||||
-webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
|
||||
transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
|
||||
30% {
|
||||
-webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
|
||||
transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
|
||||
50% {
|
||||
-webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
|
||||
transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
|
||||
57% {
|
||||
-webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
|
||||
transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
|
||||
64% {
|
||||
-webkit-transform: scale(1, 1) translateY(0);
|
||||
transform: scale(1, 1) translateY(0); }
|
||||
100% {
|
||||
-webkit-transform: scale(1, 1) translateY(0);
|
||||
transform: scale(1, 1) translateY(0); } }
|
||||
|
||||
@keyframes fa-bounce {
|
||||
0% {
|
||||
-webkit-transform: scale(1, 1) translateY(0);
|
||||
transform: scale(1, 1) translateY(0); }
|
||||
10% {
|
||||
-webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
|
||||
transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
|
||||
30% {
|
||||
-webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
|
||||
transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
|
||||
50% {
|
||||
-webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
|
||||
transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
|
||||
57% {
|
||||
-webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
|
||||
transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
|
||||
64% {
|
||||
-webkit-transform: scale(1, 1) translateY(0);
|
||||
transform: scale(1, 1) translateY(0); }
|
||||
100% {
|
||||
-webkit-transform: scale(1, 1) translateY(0);
|
||||
transform: scale(1, 1) translateY(0); } }
|
||||
|
||||
@-webkit-keyframes fa-fade {
|
||||
50% {
|
||||
opacity: var(--fa-fade-opacity, 0.4); } }
|
||||
|
||||
@keyframes fa-fade {
|
||||
50% {
|
||||
opacity: var(--fa-fade-opacity, 0.4); } }
|
||||
|
||||
@-webkit-keyframes fa-beat-fade {
|
||||
0%, 100% {
|
||||
opacity: var(--fa-beat-fade-opacity, 0.4);
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
50% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
|
||||
transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
|
||||
|
||||
@keyframes fa-beat-fade {
|
||||
0%, 100% {
|
||||
opacity: var(--fa-beat-fade-opacity, 0.4);
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
50% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
|
||||
transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
|
||||
|
||||
@-webkit-keyframes fa-flip {
|
||||
50% {
|
||||
-webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
|
||||
transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
|
||||
|
||||
@keyframes fa-flip {
|
||||
50% {
|
||||
-webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
|
||||
transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
|
||||
|
||||
@-webkit-keyframes fa-shake {
|
||||
0% {
|
||||
-webkit-transform: rotate(-15deg);
|
||||
transform: rotate(-15deg); }
|
||||
4% {
|
||||
-webkit-transform: rotate(15deg);
|
||||
transform: rotate(15deg); }
|
||||
8%, 24% {
|
||||
-webkit-transform: rotate(-18deg);
|
||||
transform: rotate(-18deg); }
|
||||
12%, 28% {
|
||||
-webkit-transform: rotate(18deg);
|
||||
transform: rotate(18deg); }
|
||||
16% {
|
||||
-webkit-transform: rotate(-22deg);
|
||||
transform: rotate(-22deg); }
|
||||
20% {
|
||||
-webkit-transform: rotate(22deg);
|
||||
transform: rotate(22deg); }
|
||||
32% {
|
||||
-webkit-transform: rotate(-12deg);
|
||||
transform: rotate(-12deg); }
|
||||
36% {
|
||||
-webkit-transform: rotate(12deg);
|
||||
transform: rotate(12deg); }
|
||||
40%, 100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); } }
|
||||
|
||||
@keyframes fa-shake {
|
||||
0% {
|
||||
-webkit-transform: rotate(-15deg);
|
||||
transform: rotate(-15deg); }
|
||||
4% {
|
||||
-webkit-transform: rotate(15deg);
|
||||
transform: rotate(15deg); }
|
||||
8%, 24% {
|
||||
-webkit-transform: rotate(-18deg);
|
||||
transform: rotate(-18deg); }
|
||||
12%, 28% {
|
||||
-webkit-transform: rotate(18deg);
|
||||
transform: rotate(18deg); }
|
||||
16% {
|
||||
-webkit-transform: rotate(-22deg);
|
||||
transform: rotate(-22deg); }
|
||||
20% {
|
||||
-webkit-transform: rotate(22deg);
|
||||
transform: rotate(22deg); }
|
||||
32% {
|
||||
-webkit-transform: rotate(-12deg);
|
||||
transform: rotate(-12deg); }
|
||||
36% {
|
||||
-webkit-transform: rotate(12deg);
|
||||
transform: rotate(12deg); }
|
||||
40%, 100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); } }
|
||||
|
||||
@-webkit-keyframes fa-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@keyframes fa-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
.fa-rotate-90 {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg); }
|
||||
|
||||
.fa-rotate-180 {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg); }
|
||||
|
||||
.fa-rotate-270 {
|
||||
-webkit-transform: rotate(270deg);
|
||||
transform: rotate(270deg); }
|
||||
|
||||
.fa-flip-horizontal {
|
||||
-webkit-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1); }
|
||||
|
||||
.fa-flip-vertical {
|
||||
-webkit-transform: scale(1, -1);
|
||||
transform: scale(1, -1); }
|
||||
|
||||
.fa-flip-both,
|
||||
.fa-flip-horizontal.fa-flip-vertical {
|
||||
-webkit-transform: scale(-1, -1);
|
||||
transform: scale(-1, -1); }
|
||||
|
||||
.fa-rotate-by {
|
||||
-webkit-transform: rotate(var(--fa-rotate-angle, none));
|
||||
transform: rotate(var(--fa-rotate-angle, none)); }
|
||||
|
||||
.fa-stack {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 2em;
|
||||
position: relative;
|
||||
width: 2.5em; }
|
||||
|
||||
.fa-stack-1x,
|
||||
.fa-stack-2x {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: var(--fa-stack-z-index, auto); }
|
||||
|
||||
.svg-inline--fa.fa-stack-1x {
|
||||
height: 1em;
|
||||
width: 1.25em; }
|
||||
|
||||
.svg-inline--fa.fa-stack-2x {
|
||||
height: 2em;
|
||||
width: 2.5em; }
|
||||
|
||||
.fa-inverse {
|
||||
color: var(--fa-inverse, #fff); }
|
||||
|
||||
.sr-only,
|
||||
.fa-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0; }
|
||||
|
||||
.sr-only-focusable:not(:focus),
|
||||
.fa-sr-only-focusable:not(:focus) {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0; }
|
||||
|
||||
.svg-inline--fa .fa-primary {
|
||||
fill: var(--fa-primary-color, currentColor);
|
||||
opacity: var(--fa-primary-opacity, 1); }
|
||||
|
||||
.svg-inline--fa .fa-secondary {
|
||||
fill: var(--fa-secondary-color, currentColor);
|
||||
opacity: var(--fa-secondary-opacity, 0.4); }
|
||||
|
||||
.svg-inline--fa.fa-swap-opacity .fa-primary {
|
||||
opacity: var(--fa-secondary-opacity, 0.4); }
|
||||
|
||||
.svg-inline--fa.fa-swap-opacity .fa-secondary {
|
||||
opacity: var(--fa-primary-opacity, 1); }
|
||||
|
||||
.svg-inline--fa mask .fa-primary,
|
||||
.svg-inline--fa mask .fa-secondary {
|
||||
fill: black; }
|
||||
|
||||
.fad.fa-inverse,
|
||||
.fa-duotone.fa-inverse {
|
||||
color: var(--fa-inverse, #fff); }
|
||||
File diff suppressed because one or more lines are too long
19
landing/assets/font-awesome/css/thin.css
vendored
19
landing/assets/font-awesome/css/thin.css
vendored
@@ -1,19 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-style-family-classic: 'Font Awesome 6 Pro';
|
||||
--fa-font-thin: normal 100 1em/1 'Font Awesome 6 Pro'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-thin-100.woff2") format("woff2"), url("../webfonts/fa-thin-100.ttf") format("truetype"); }
|
||||
|
||||
.fat,
|
||||
.fa-thin {
|
||||
font-weight: 100; }
|
||||
6
landing/assets/font-awesome/css/thin.min.css
vendored
6
landing/assets/font-awesome/css/thin.min.css
vendored
@@ -1,6 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-thin:normal 100 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:100;font-display:block;src:url(../webfonts/fa-thin-100.woff2) format("woff2"),url(../webfonts/fa-thin-100.ttf) format("truetype")}.fa-thin,.fat{font-weight:100}
|
||||
26
landing/assets/font-awesome/css/v4-font-face.css
vendored
26
landing/assets/font-awesome/css/v4-font-face.css
vendored
@@ -1,26 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype");
|
||||
unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"), url("../webfonts/fa-v4compatibility.ttf") format("truetype");
|
||||
unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F27A; }
|
||||
@@ -1,6 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}
|
||||
2194
landing/assets/font-awesome/css/v4-shims.css
vendored
2194
landing/assets/font-awesome/css/v4-shims.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
34
landing/assets/font-awesome/css/v5-font-face.css
vendored
34
landing/assets/font-awesome/css/v5-font-face.css
vendored
@@ -1,34 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Brands';
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Pro';
|
||||
font-display: block;
|
||||
font-weight: 900;
|
||||
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Pro';
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Pro';
|
||||
font-display: block;
|
||||
font-weight: 300;
|
||||
src: url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Duotone';
|
||||
font-display: block;
|
||||
font-weight: 900;
|
||||
src: url("../webfonts/fa-duotone-900.woff2") format("woff2"), url("../webfonts/fa-duotone-900.ttf") format("truetype"); }
|
||||
@@ -1,6 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Pro";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Pro";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Pro";font-display:block;font-weight:300;src:url(../webfonts/fa-light-300.woff2) format("woff2"),url(../webfonts/fa-light-300.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Duotone";font-display:block;font-weight:900;src:url(../webfonts/fa-duotone-900.woff2) format("woff2"),url(../webfonts/fa-duotone-900.ttf) format("truetype")}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,34 +0,0 @@
|
||||
/**
|
||||
* ----------------------------------------
|
||||
* 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,107 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');
|
||||
@import url('https://fonts.cdnfonts.com/css/brockmann');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
|
||||
|
||||
@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');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
|
||||
@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 {
|
||||
font-family: "Font Awesome 6 Pro" !important;
|
||||
}
|
||||
|
||||
.fab {
|
||||
font-family: "Font Awesome 6 Brands" !important;
|
||||
}
|
||||
|
||||
.inconsolata {
|
||||
font-family: "Inconsolata" !important;
|
||||
}
|
||||
|
||||
.brockmann {
|
||||
font-family: "Brockmann" !important;
|
||||
}
|
||||
|
||||
.nunito {
|
||||
font-family: "Nunito" !important;
|
||||
}
|
||||
|
||||
.inter {
|
||||
font-family: "Inter" !important;
|
||||
}
|
||||
|
||||
.geometric {
|
||||
font-family: 'Geometric Sans Serif v1' !important;
|
||||
}
|
||||
|
||||
.manrope {
|
||||
font-family: 'Manrope' !important;
|
||||
}
|
||||
|
||||
.lato {
|
||||
font-family: 'Lato' !important;
|
||||
}
|
||||
|
||||
.poppins {
|
||||
font-family: 'Poppins' !important;
|
||||
}
|
||||
|
||||
.poppins-childs {
|
||||
font-family: 'Poppins' !important;
|
||||
|
||||
* {
|
||||
font-family: 'Poppins' !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-scroll {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.card-shadow {
|
||||
box-shadow: 0 0 18px #00000033;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100dvw;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Nunito';
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
.test0 {
|
||||
@apply border-gray-400/20 border;
|
||||
}
|
||||
|
||||
.test {
|
||||
border: 1px solid yellow !important;
|
||||
}
|
||||
|
||||
.test2 {
|
||||
border: 2px solid blue !important;
|
||||
}
|
||||
|
||||
.test3 {
|
||||
border: 3px solid green !important;
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
export type BlogPost = {
|
||||
author: string,
|
||||
authorImage: string,
|
||||
created_at: string,
|
||||
image: string,
|
||||
title: string,
|
||||
subtitle: string,
|
||||
id: string
|
||||
}
|
||||
|
||||
export const homePostsIndexes = ref<number[]>([
|
||||
1, 0
|
||||
])
|
||||
|
||||
export const blogPosts = ref<BlogPost[]>([
|
||||
{
|
||||
author: 'Antonio, CEO at Litlyx',
|
||||
authorImage: 'AntonioVerdiglione.jpg',
|
||||
image: 'posts/presenting-litlyx.jpg',
|
||||
created_at: "Jul 16, 2024",
|
||||
title: 'Presenting Litlyx',
|
||||
subtitle: 'Our Why. Our Vision. Our Manifestation of Intent',
|
||||
id: 'presenting-litlyx'
|
||||
},
|
||||
{
|
||||
author: 'Antonio, CEO at Litlyx',
|
||||
authorImage: 'AntonioVerdiglione.jpg',
|
||||
image: 'posts/why-choose-litlyx.jpg',
|
||||
created_at: "Sep 1, 2024",
|
||||
title: 'Why choose Litlyx',
|
||||
subtitle: 'Litlyx vs Plausible vs Google Analitycs',
|
||||
id: 'why-choose-litlyx'
|
||||
}
|
||||
]);
|
||||
|
||||
export const homePosts = computed(() => {
|
||||
return homePostsIndexes.value.map(e => blogPosts.value[e]);
|
||||
// return blogPosts.value.filter((e, i) => homePostsIndexes.value.includes(i));
|
||||
})
|
||||
@@ -1,28 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-[90%]">
|
||||
|
||||
<div class="flex justify-center mt-20 z-[25] relative items-center flex-col gap-6">
|
||||
<div class="poppins text-center font-semibold text-[2.2rem] lg:text-[3rem] text-text">
|
||||
AI Analyst
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mx-auto w-[20rem] z-[25] relative">
|
||||
<img class="w-full h-full" alt="Litlyx AI Agent" :src="'agent.png'">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center justify-center gap-2 z-[25] relative">
|
||||
<div
|
||||
class="poppins font-semibold text-[1.5rem] lg:text-[1.85rem] z-[10] text-text-sub text-center w-[75%] lg:w-[40%]">
|
||||
Meet Lit! The Agent that help you analyze your data!
|
||||
</div>
|
||||
<div class="poppins text-[1.35rem] text-text-sub text-center z-[10] w-[90%] lg:w-[60%]">
|
||||
Take metrics-driven decision with the AI agent suggestions!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,104 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
const { start, addToQueue, currentText } = useTextWriter();
|
||||
|
||||
onMounted(() => {
|
||||
addToQueue(`Lit.init("project_id");`);
|
||||
addToQueue(`Lit.event("your_event_name");`);
|
||||
|
||||
start(60, 1500);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-4 w-[90%]">
|
||||
|
||||
<div class="flex flex-col items-center justify-center gap-2">
|
||||
<div
|
||||
class="poppins font-semibold z-[10] text-[2.2rem] lg:text-[3rem] text-text-sub text-center w-[75%] lg:w-[40%]">
|
||||
Collect Analytics, Easy way
|
||||
</div>
|
||||
<div class="poppins text-[1.35rem] text-text-sub text-center w-[90%] lg:w-[60%] z-[10]">
|
||||
Website Visits, Custom Events, Referrers, Browsers, Devices, Operating Systems (OS), Countries, Search
|
||||
Terms, Unique Users, Sessions, and many more.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-menu font-semibold px-8 text-[1.2rem] md:text-[1.4rem] h-24 flex items-center inconsolata mt-12 outline outline-[2px] outline-[#83838388] rounded-lg">
|
||||
{{ currentText }}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-12 z-[20] relative">
|
||||
<div class="flex gap-6 items-center flex-col lg:flex-row">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.animated-button {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
color: white;
|
||||
text-shadow: 0 1px 0 #000;
|
||||
width: 100%;
|
||||
|
||||
--border-angle: 0turn; // For animation.
|
||||
|
||||
--main-bg: conic-gradient(from var(--border-angle),
|
||||
rgb(17, 20, 51),
|
||||
rgb(17, 18, 34) 5%,
|
||||
rgb(17, 20, 34) 60%,
|
||||
rgb(17, 28, 51) 95%);
|
||||
|
||||
|
||||
border: solid 2px transparent;
|
||||
--gradient-border: conic-gradient(from var(--border-angle),
|
||||
transparent 25%,
|
||||
rgb(0, 136, 255),
|
||||
transparent 99%,
|
||||
transparent);
|
||||
|
||||
background:
|
||||
// padding-box clip this background in to the overall element except the border.
|
||||
var(--main-bg) padding-box,
|
||||
// border-box extends this background to the border space
|
||||
var(--gradient-border) border-box,
|
||||
// Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background.
|
||||
var(--main-bg) border-box;
|
||||
|
||||
background-position: center center;
|
||||
|
||||
animation: bg-spin 3s linear infinite;
|
||||
|
||||
@keyframes bg-spin {
|
||||
to {
|
||||
--border-angle: 1turn;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
@property --border-angle {
|
||||
syntax: "<angle>";
|
||||
inherits: true;
|
||||
initial-value: 0turn;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@@ -1,16 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
const props = defineProps<{
|
||||
action?: () => {},
|
||||
link?: string,
|
||||
target?: string
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink @click="action?.()" :to="link" :target="target || ''"
|
||||
class="poppins cursor-pointer font-[500] px-10 py-[.3rem] bg-[#222A42] outline outline-[1px] outline-[#5680F8] rounded-xl">
|
||||
<slot></slot>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
@@ -1,9 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="py-20 bg-black outline relative outline-[3px] outline-[#6e6e6e70] w-[90%] rounded-xl">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,83 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="py-20 bg-black outline relative outline-[3px] outline-[#6e6e6e70] w-[90%] rounded-xl">
|
||||
|
||||
<div class="absolute top-0 w-full h-full overflow-hidden">
|
||||
<Globe class="flex justify-end opacity-80"></Globe>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center justify-center gap-2">
|
||||
<div class="poppins font-semibold text-[1.6rem] lg:text-[1.9rem] z-[10] text-text-sub text-center">
|
||||
We Are Open-Source
|
||||
</div>
|
||||
<div class="poppins text-[1.35rem] text-text-sub text-center z-[10]">
|
||||
Self Host your own analytics Dashboard
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-10">
|
||||
<a href="https://github.com/Litlyx/litlyx" target="_blank"
|
||||
class="animated-button poppins font-semibold text-[1.1rem] cursor-pointer px-12 py-3 relative z-[20]">
|
||||
Leave a ⭐ on Github
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.animated-button {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
color: white;
|
||||
text-shadow: 0 1px 0 #000;
|
||||
width: fit-content;
|
||||
|
||||
--border-angle: 0turn; // For animation.
|
||||
|
||||
--main-bg: conic-gradient(from var(--border-angle),
|
||||
#213,
|
||||
#112 5%,
|
||||
#112 60%,
|
||||
#213 95%);
|
||||
|
||||
|
||||
|
||||
border: solid 2px transparent;
|
||||
border-radius: 1rem;
|
||||
--gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
|
||||
|
||||
background:
|
||||
// padding-box clip this background in to the overall element except the border.
|
||||
var(--main-bg) padding-box,
|
||||
// border-box extends this background to the border space
|
||||
var(--gradient-border) border-box,
|
||||
// Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background.
|
||||
var(--main-bg) border-box;
|
||||
|
||||
background-position: center center;
|
||||
|
||||
animation: bg-spin 3s linear infinite;
|
||||
|
||||
@keyframes bg-spin {
|
||||
to {
|
||||
--border-angle: 1turn;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
@property --border-angle {
|
||||
syntax: "<angle>";
|
||||
inherits: true;
|
||||
initial-value: 0turn;
|
||||
}
|
||||
</style>
|
||||
@@ -1,36 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
type Props = {
|
||||
options: { label: string }[],
|
||||
currentIndex: number
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emits = defineEmits<{
|
||||
(evt: 'changeIndex', newIndex: number): void;
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
|
||||
<div class="flex gap-2 border-[1px] border-gray-400 px-2 py-2 rounded-xl">
|
||||
<div @click="$emit('changeIndex', index)" v-for="(opt, index) of options"
|
||||
class="hover:bg-white/10 select-btn-animated cursor-pointer px-3 py-1 rounded-lg poppins font-semibold"
|
||||
:class="{
|
||||
'bg-accent hover:!bg-accent': currentIndex == index,
|
||||
}">
|
||||
{{ opt.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.select-btn-animated {
|
||||
transition: all .4s linear;
|
||||
}
|
||||
</style>
|
||||
@@ -1,26 +0,0 @@
|
||||
<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>
|
||||
@@ -1,98 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
const testimonials = ref<{ text: string, name: string, stars: number }[]>([
|
||||
// { text: ``, name: "Vik", stars: 5 },
|
||||
// { text: ``, name: "Fede", stars: 5 },
|
||||
{ text: `Litlyx saved me so much time.`, name: "Luca", stars: 5 },
|
||||
{ text: `This simplicity is a game-changer! Thank you Litlyx.`, name: "Anto", stars: 5 },
|
||||
{ text: `Transparency & Open-source. Love it!`, name: "Alessio", stars: 5 },
|
||||
{
|
||||
text: `Litlyx made setting up analytics on my website incredibly easy with just one line of code.
|
||||
At only €9,99 a month, it tracks all KPIs perfectly. Cost-effective I’ve to say!`, name: "Bobby", stars: 5
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex animated-container w-full h-fit">
|
||||
<div v-for="testimonial of testimonials">
|
||||
<div class="flex flex-col gap-3 items-center px-20 text-center">
|
||||
<div class="poppins font-semibold text-[1.2rem]">
|
||||
{{ testimonial.name }}
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<i v-for="_ of new Array(testimonial.stars).fill(0)" class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="poppins">
|
||||
"{{ testimonial.text }}"
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
$n: 4;
|
||||
/* number of elements */
|
||||
|
||||
.animated-container {
|
||||
--d: 25s;
|
||||
/* duration */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
/* number of visible elements + width */
|
||||
overflow: hidden;
|
||||
-webkit-mask: linear-gradient(90deg, #0000, #000 20% 80%, #0000);
|
||||
}
|
||||
|
||||
.animated-container>div {
|
||||
grid-area: 1/1;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 10px;
|
||||
background: #000000 padding-box;
|
||||
border-radius: 1rem;
|
||||
padding: 1rem 1rem;
|
||||
border-inline: 10px solid #0000;
|
||||
animation: r var(--d) linear infinite;
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.animated-container>div img {
|
||||
width: 100%;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.animated-container>div * {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.animated-container>div h3 {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@for $i from 2 to ($n + 1) {
|
||||
.animated-container>div:nth-child(#{$i}) {
|
||||
animation-delay: calc(#{(1 - $i)/$n}*var(--d))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$perc: calc(100% / $n);
|
||||
|
||||
@keyframes r {
|
||||
#{$perc} {
|
||||
transform: translate(-100%)
|
||||
}
|
||||
|
||||
#{$perc + 0.01%} {
|
||||
transform: translate(($n - 1) * 100%)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { blogPosts } from '~/blog/Blog';
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
const route = useRoute();
|
||||
const id = route.path.replace('/blog/', '');
|
||||
const blogPost = blogPosts.value.find(e => e.id == id);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="article flex justify-center">
|
||||
<article class="max-w-[1000px]">
|
||||
<header>
|
||||
<div class="flex flex-col items-center">
|
||||
<h1 class="text-6xl font-normal">
|
||||
{{ blogPost?.title }}
|
||||
</h1>
|
||||
<p class="mt-6 text-2xl">
|
||||
{{ blogPost?.subtitle }}
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<img class="w-9 h-9 rounded-full" :src="'/blog/' + blogPost?.authorImage" :alt="blogPost?.author">
|
||||
<p class="align-middle mt-4">
|
||||
{{ blogPost?.author }}
|
||||
</p>
|
||||
<span class="text-gray-400"> • {{ blogPost?.created_at }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img class="w-full h-full rounded-xl outline outline-[1px] outline-gray-100/20 mt-10 mb-10"
|
||||
:src="'/blog/' + blogPost?.image" :alt="blogPost?.title">
|
||||
</header>
|
||||
<slot></slot>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.article * {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
header,
|
||||
section,
|
||||
footer {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,108 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
|
||||
type Props = {
|
||||
size: number,
|
||||
spacing: number,
|
||||
opacity: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const sizeArr = new Array(props.size).fill('a');
|
||||
|
||||
function calculateOpacity(x: number, y: number) {
|
||||
const distanceFromCenter = Math.sqrt(Math.pow(x - props.size / 2, 2) + Math.pow(y - props.size / 2, 2));
|
||||
const normalizedDistance = distanceFromCenter / (props.size / 2);
|
||||
return (1 - normalizedDistance).toFixed(1);
|
||||
}
|
||||
|
||||
const widthHeight = computed(() => {
|
||||
return 9 + props.size * props.spacing;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="w-fit h-fit">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" :width="widthHeight" :height="widthHeight" :style="`opacity: ${props.opacity};`"
|
||||
fill="none">
|
||||
|
||||
<template v-for="(p, x) of sizeArr">
|
||||
<template v-for="(p, y) of sizeArr">
|
||||
<circle :cx="9 + (spacing * x)" :cy="9 + (spacing * y)" r="1" fill="#fff"
|
||||
:fill-opacity="calculateOpacity(x, y)" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- <circle cx="27" cy="9" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="45" cy="9" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="63" cy="9" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="81" cy="9" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="99" cy="9" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="117" cy="9" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="135" cy="9" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="9" cy="27" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="27" cy="27" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="45" cy="27" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="63" cy="27" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="81" cy="27" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="99" cy="27" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="117" cy="27" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="135" cy="27" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="9" cy="45" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="27" cy="45" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="45" cy="45" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="63" cy="45" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="81" cy="45" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="99" cy="45" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="117" cy="45" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="135" cy="45" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="9" cy="63" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="27" cy="63" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="45" cy="63" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="63" cy="63" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="81" cy="63" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="99" cy="63" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="117" cy="63" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="135" cy="63" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="9" cy="81" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="27" cy="81" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="45" cy="81" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="63" cy="81" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="81" cy="81" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="99" cy="81" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="117" cy="81" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="135" cy="81" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="9" cy="99" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="27" cy="99" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="45" cy="99" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="63" cy="99" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="81" cy="99" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="99" cy="99" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="117" cy="99" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="135" cy="99" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="9" cy="117" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="27" cy="117" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="45" cy="117" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="63" cy="117" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="81" cy="117" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="99" cy="117" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="117" cy="117" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="135" cy="117" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="9" cy="135" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="27" cy="135" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="45" cy="135" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="63" cy="135" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="81" cy="135" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="99" cy="135" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="117" cy="135" r="1" fill="#fff" fill-opacity=".9" />
|
||||
<circle cx="135" cy="135" r="1" fill="#fff" fill-opacity=".9" />
|
||||
-->
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,23 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
const props = defineProps<{ title: string, text: string, icon: string }>();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="bg-menu flex flex-col justify-center items-center px-8 py-10 w-[20rem] gap-4 rounded-xl">
|
||||
<div>
|
||||
<div class="bg-[#36363f] p-6 flex items-center justify-center h-[5rem] w-[5rem] rounded-2xl">
|
||||
<i :class="props.icon" class="text-text text-[1.6rem]"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-text text-[1.3rem] poppins font-semibold text-center mt-6">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div class="text-text-sub/80 text-[1rem] poppins text-center">
|
||||
{{ props.text }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,20 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
const props = defineProps<{
|
||||
icon: string,
|
||||
name: string
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="p-6 flex flex-col items-center gap-3">
|
||||
<div class="w-[4.2rem] h-[4.2rem] lg:w-[6rem] lg:h-[6rem] bg-menu rounded-2xl flex items-center justify-center">
|
||||
<img :alt="name" :src="icon">
|
||||
</div>
|
||||
<div class="poppins font-semibold text-text-sub">
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,69 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
export type PricingCardProp = {
|
||||
title: string,
|
||||
price: string,
|
||||
subs: string[],
|
||||
features: string[],
|
||||
cta: string,
|
||||
link?: string
|
||||
}
|
||||
|
||||
const props = defineProps<{ datas: PricingCardProp[] }>();
|
||||
|
||||
const currentIndex = ref<number>(0);
|
||||
|
||||
const data = computed(() => {
|
||||
return props.datas[currentIndex.value];
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="bg-[#151515] outline outline-[1px] outline-[#262626] py-8 px-10 rounded-lg w-full max-w-[30rem]">
|
||||
|
||||
<div class="flex flex-col gap-3 text-center">
|
||||
<div class="poppins text-xl font-light"> {{ data.title }} </div>
|
||||
<div class="poppins text-4xl font-medium"> {{ data.price }} </div>
|
||||
</div>
|
||||
|
||||
<div class="sep bg-[#262626] h-[1px] my-8"></div>
|
||||
|
||||
<div class="flex flex-col text-center h-[6rem] justify-center gap-2">
|
||||
<div v-if="datas.length > 1">
|
||||
<URange :ui="{
|
||||
thumb: {
|
||||
color: 'text-[#5680f8]'
|
||||
},
|
||||
progress: {
|
||||
background: '!bg-[#5680f8]'
|
||||
}
|
||||
}" :min="0" :max="datas.length - 1" v-model="currentIndex">
|
||||
</URange>
|
||||
</div>
|
||||
<div class="poppins" v-for="sub of data.subs"> {{ sub }} </div>
|
||||
</div>
|
||||
|
||||
<div class="sep bg-[#262626] h-[1px] my-8"></div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-2" v-for="feature of data.features">
|
||||
<div class="h-6 w-6">
|
||||
<img class="w-full h-full" :src="'check.png'" alt="Check">
|
||||
</div>
|
||||
<div>{{ feature }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 flex">
|
||||
<MainButton :link="data.link || 'https://dashboard.litlyx.com'"
|
||||
class="w-full !rounded-md text-center text-[.9rem] !py-2">
|
||||
{{ data.cta }}
|
||||
</MainButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,49 +0,0 @@
|
||||
|
||||
|
||||
|
||||
export function useTextWriter() {
|
||||
const text = ref<string>("");
|
||||
|
||||
const queue: string[] = [];
|
||||
let currentQueueIndex = 0;
|
||||
|
||||
let totalText: string;
|
||||
let interval: any;
|
||||
|
||||
function start(ms: number, msBeforeText: number) {
|
||||
const currentQueueText = queue[currentQueueIndex];
|
||||
totalText = currentQueueText;
|
||||
stop();
|
||||
text.value = '';
|
||||
interval = setInterval(() => {
|
||||
const nextLen = text.value.length + 1;
|
||||
text.value = totalText.substring(0, nextLen);
|
||||
if (text.value.length >= totalText.length) {
|
||||
currentQueueIndex++;
|
||||
if (currentQueueIndex > queue.length - 1) {
|
||||
currentQueueIndex = 0;
|
||||
}
|
||||
stop();
|
||||
setTimeout(() => {
|
||||
start(ms, msBeforeText);
|
||||
}, msBeforeText)
|
||||
}
|
||||
}, ms);
|
||||
}
|
||||
|
||||
function addToQueue(newText: string) {
|
||||
queue.push(newText);
|
||||
}
|
||||
|
||||
function stop() {
|
||||
if (interval) clearInterval(interval);
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stop();
|
||||
})
|
||||
|
||||
return {
|
||||
currentText: text, addToQueue, start, stop
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
module.exports = {
|
||||
apps: [
|
||||
{
|
||||
name: 'Landing',
|
||||
port: '3009',
|
||||
exec_mode: 'fork',
|
||||
script: './.output/server/index.mjs',
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,340 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
const isMenuOpen = ref<boolean>(false);
|
||||
|
||||
|
||||
const scroller = ref<any>(null);
|
||||
|
||||
const nuxtApp = useNuxtApp()
|
||||
|
||||
nuxtApp.hook("page:finish", () => {
|
||||
scroller.value?.scrollTo(0, 0);
|
||||
})
|
||||
|
||||
|
||||
const gitstars = ref<string>('Loading...')
|
||||
|
||||
async function getGithubStars() {
|
||||
const res = await fetch('https://api.github.com/repos/litlyx/litlyx');
|
||||
if (!res.ok) return gitstars.value = '340+'
|
||||
const data = await res.json();
|
||||
return gitstars.value = data.stargazers_count.toString() + '+';
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getGithubStars();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
|
||||
<div class="layout h-full flex flex-col pt-1 px-1">
|
||||
|
||||
<div
|
||||
class="text-white items-center py-4 gap-2 flex-col lg:flex-row lg:mx-20 lg:pl-10 hidden lg:flex z-[20] relative">
|
||||
|
||||
|
||||
<NuxtLink to="/" tag="div" class="flex gap-4 items-center">
|
||||
<div class="bg-black h-[2.8rem] aspect-[1/1] flex items-center justify-center rounded-lg">
|
||||
<img class="h-[1.8rem]" alt="Litlyx logo" :src="'/logo.png'">
|
||||
</div>
|
||||
<div class="font-semibold text-[1.6rem] text-gray-300 poppins">
|
||||
Litlyx
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
<div class="grow"></div>
|
||||
<div class="flex gap-8 text-[1.1rem] text-white font-[500] items-center">
|
||||
<NuxtLink to="https://litlyx.com/blog" class="poppins hover:text-text-sub/90">
|
||||
Blog
|
||||
</NuxtLink>
|
||||
<NuxtLink target="_blank" to="https://dashboard.litlyx.com/live_demo"
|
||||
class="poppins hover:text-text-sub/90 whitespace-nowrap">
|
||||
Live demo
|
||||
</NuxtLink>
|
||||
<NuxtLink target="_blank" to="https://docs.litlyx.com" class="poppins hover:text-text-sub/90">
|
||||
Docs
|
||||
</NuxtLink>
|
||||
<!-- <NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx" class="poppins hover:text-text-sub/90">
|
||||
GitHub
|
||||
</NuxtLink> -->
|
||||
<NuxtLink to="/pricing" class="poppins hover:text-text-sub/90">
|
||||
Pricing
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="https://github.com/Litlyx/litlyx"
|
||||
class="cursor-pointer hover:bg-white/10 flex items-center gap-2 rounded-lg outline outline-[1px] outline-white px-6 py-[.3rem]">
|
||||
<div class="w-6 h-6">
|
||||
<svg viewBox="0 0 100 98" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M50.0002 0.000488281C22.3894 0.000488281 0 22.386 0 50.0007C0 72.0924 14.3266 90.8345 34.1933 97.4461C36.692 97.9088 37.6096 96.3614 37.6096 95.0406C37.6096 93.8485 37.563 89.9095 37.5418 85.7316C23.6313 88.7562 20.6961 79.8322 20.6961 79.8322C18.4217 74.0528 15.1446 72.5163 15.1446 72.5163C10.6083 69.4129 15.4865 69.4765 15.4865 69.4765C20.5075 69.8294 23.1513 74.6292 23.1513 74.6292C27.6108 82.2733 34.8482 80.0631 37.7014 78.7859C38.15 75.5539 39.4461 73.3485 40.8758 72.0999C29.7703 70.8352 18.0954 66.5479 18.0954 47.3894C18.0954 41.9308 20.0487 37.4701 23.2474 33.9687C22.7282 32.7091 21.0169 27.6238 23.7317 20.7366C23.7317 20.7366 27.9304 19.3927 37.4853 25.8619C41.4734 24.7537 45.7509 24.1985 50.0002 24.1796C54.2495 24.1985 58.5301 24.7537 62.526 25.8619C72.0696 19.3927 76.2624 20.7366 76.2624 20.7366C78.9839 27.6238 77.2718 32.7091 76.7526 33.9687C79.9584 37.4701 81.8983 41.9304 81.8983 47.3894C81.8983 66.5934 70.2014 70.8223 59.0677 72.0599C60.861 73.6116 62.459 76.6546 62.459 81.3192C62.459 88.0091 62.4009 93.3936 62.4009 95.0406C62.4009 96.3712 63.3009 97.9304 65.8357 97.4394C85.6915 90.8204 100 72.085 100 50.0007C100 22.386 77.6137 0.000488281 50.0002 0.000488281Z"
|
||||
fill="white" />
|
||||
<path
|
||||
d="M18.7269 71.2268C18.6171 71.475 18.2257 71.5495 17.8701 71.3793C17.5073 71.2162 17.3034 70.8774 17.421 70.628C17.5289 70.3723 17.9202 70.3009 18.2822 70.4727C18.6457 70.6354 18.8528 70.9774 18.7269 71.2268ZM21.1864 73.4212C20.948 73.6424 20.4817 73.5396 20.1653 73.1902C19.8382 72.8416 19.777 72.3758 20.019 72.1511C20.2649 71.9303 20.717 72.0334 21.0448 72.3824C21.3719 72.735 21.4354 73.1981 21.186 73.4216L21.1864 73.4212ZM22.8738 76.229C22.5672 76.4419 22.066 76.2423 21.7566 75.7976C21.4503 75.3533 21.4503 74.82 21.7633 74.6063C22.0738 74.3925 22.5672 74.5847 22.8809 75.0259C23.1867 75.478 23.1867 76.0113 22.8734 76.2293L22.8738 76.229ZM25.727 79.481C25.4529 79.7829 24.8694 79.7022 24.442 79.2896C24.0051 78.8865 23.8832 78.3144 24.1581 78.012C24.4353 77.7093 25.0224 77.7944 25.4529 78.2034C25.887 78.6057 26.0196 79.1822 25.7274 79.481H25.727ZM29.4148 80.579C29.2944 80.9704 28.732 81.1484 28.1658 80.9821C27.6003 80.8108 27.2301 80.3519 27.3442 79.9563C27.4619 79.5622 28.0266 79.3767 28.5971 79.5547C29.1618 79.7253 29.5328 80.1806 29.4152 80.579H29.4148ZM33.6123 81.0445C33.6264 81.457 33.146 81.799 32.5515 81.8064C31.9535 81.8194 31.47 81.4856 31.4637 81.0802C31.4637 80.6637 31.9331 80.3249 32.5307 80.3151C33.1252 80.3033 33.6123 80.6347 33.6123 81.0445ZM37.7353 80.8864C37.8066 81.2888 37.3933 81.7021 36.8031 81.8119C36.2228 81.9178 35.6855 81.6695 35.6114 81.2707C35.5393 80.8582 35.9604 80.4453 36.5396 80.3382C37.131 80.2355 37.66 80.4774 37.7353 80.8864Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-[1rem]">
|
||||
{{ gitstars }}
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
</div>
|
||||
<div class="px-10 pt-6 lg:pt-0">
|
||||
|
||||
<MainButton link="https://dashboard.litlyx.com" class="!whitespace-nowrap">
|
||||
Get started
|
||||
</MainButton>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex lg:hidden p-4 z-[20] relative">
|
||||
<NuxtLink to="/" class="flex gap-4 items-center">
|
||||
<div class="bg-black h-[2.8rem] aspect-[1/1] flex items-center justify-center rounded-lg">
|
||||
<img class="h-[1.8rem]" alt="Litlyx logo" :src="'/logo.png'">
|
||||
</div>
|
||||
<div class="font-bold text-[1.6rem] text-gray-300 poppins">
|
||||
Litlyx
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
<div class="grow"></div>
|
||||
<div class="text-text-sub text-[1.5rem] flex items-center">
|
||||
<i @click="isMenuOpen = !isMenuOpen" class="fas fa-bars" :class="{ 'fa-times': isMenuOpen }"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div ref="scroller" :class="{ 'overflow-y-hidden': isMenuOpen }" class="overflow-y-auto shrink h-full relative">
|
||||
<div v-if="isMenuOpen" class="menu fixed z-[30] top-20 left-0 w-full bg-bg h-dvh lg:hidden">
|
||||
<div class="flex flex-col p-4">
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<NuxtLink to="https://dashboard.litlyx.com" target="_blank"
|
||||
class="animated-button poppins font-semibold px-4 py-3 text-center bg-black rounded-lg">
|
||||
Get started for free
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="https://dashboard.litlyx.com/live_demo" target="_blank"
|
||||
class="poppins font-semibold px-4 mb-6 py-3 text-center bg-transparent border-solid border-[1px] border-white/80 text-white rounded-lg">
|
||||
Live demo
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
|
||||
<NuxtLink to="https://litlyx.com/blog" class="flex justify-between items-center mr-2">
|
||||
<div class="hover:text-text-sub/90 py-3">
|
||||
Blog
|
||||
</div>
|
||||
<div> <i class="fas fa-chevron-right"></i> </div>
|
||||
</NuxtLink>
|
||||
|
||||
<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">
|
||||
Docs
|
||||
</div>
|
||||
<div> <i class="fas fa-chevron-right"></i> </div>
|
||||
</NuxtLink>
|
||||
|
||||
<div class="divider border-b border-gray-500/40"></div>
|
||||
|
||||
<NuxtLink @click="isMenuOpen = false" to="/pricing" class="flex justify-between items-center mr-2">
|
||||
<div class="hover:text-text-sub/90 py-3">
|
||||
Pricing
|
||||
</div>
|
||||
<div> <i class="fas fa-chevron-right"></i> </div>
|
||||
</NuxtLink>
|
||||
|
||||
|
||||
|
||||
<div class="divider border-b border-gray-500/40"></div>
|
||||
|
||||
|
||||
<NuxtLink to="https://github.com/Litlyx/litlyx"
|
||||
class="cursor-pointer hover:bg-white/10 mt-10 flex justify-center items-center gap-2 rounded-lg outline outline-[1px] outline-white px-6 py-3">
|
||||
<div class="w-6 h-6">
|
||||
<svg viewBox="0 0 100 98" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M50.0002 0.000488281C22.3894 0.000488281 0 22.386 0 50.0007C0 72.0924 14.3266 90.8345 34.1933 97.4461C36.692 97.9088 37.6096 96.3614 37.6096 95.0406C37.6096 93.8485 37.563 89.9095 37.5418 85.7316C23.6313 88.7562 20.6961 79.8322 20.6961 79.8322C18.4217 74.0528 15.1446 72.5163 15.1446 72.5163C10.6083 69.4129 15.4865 69.4765 15.4865 69.4765C20.5075 69.8294 23.1513 74.6292 23.1513 74.6292C27.6108 82.2733 34.8482 80.0631 37.7014 78.7859C38.15 75.5539 39.4461 73.3485 40.8758 72.0999C29.7703 70.8352 18.0954 66.5479 18.0954 47.3894C18.0954 41.9308 20.0487 37.4701 23.2474 33.9687C22.7282 32.7091 21.0169 27.6238 23.7317 20.7366C23.7317 20.7366 27.9304 19.3927 37.4853 25.8619C41.4734 24.7537 45.7509 24.1985 50.0002 24.1796C54.2495 24.1985 58.5301 24.7537 62.526 25.8619C72.0696 19.3927 76.2624 20.7366 76.2624 20.7366C78.9839 27.6238 77.2718 32.7091 76.7526 33.9687C79.9584 37.4701 81.8983 41.9304 81.8983 47.3894C81.8983 66.5934 70.2014 70.8223 59.0677 72.0599C60.861 73.6116 62.459 76.6546 62.459 81.3192C62.459 88.0091 62.4009 93.3936 62.4009 95.0406C62.4009 96.3712 63.3009 97.9304 65.8357 97.4394C85.6915 90.8204 100 72.085 100 50.0007C100 22.386 77.6137 0.000488281 50.0002 0.000488281Z"
|
||||
fill="white" />
|
||||
<path
|
||||
d="M18.7269 71.2268C18.6171 71.475 18.2257 71.5495 17.8701 71.3793C17.5073 71.2162 17.3034 70.8774 17.421 70.628C17.5289 70.3723 17.9202 70.3009 18.2822 70.4727C18.6457 70.6354 18.8528 70.9774 18.7269 71.2268ZM21.1864 73.4212C20.948 73.6424 20.4817 73.5396 20.1653 73.1902C19.8382 72.8416 19.777 72.3758 20.019 72.1511C20.2649 71.9303 20.717 72.0334 21.0448 72.3824C21.3719 72.735 21.4354 73.1981 21.186 73.4216L21.1864 73.4212ZM22.8738 76.229C22.5672 76.4419 22.066 76.2423 21.7566 75.7976C21.4503 75.3533 21.4503 74.82 21.7633 74.6063C22.0738 74.3925 22.5672 74.5847 22.8809 75.0259C23.1867 75.478 23.1867 76.0113 22.8734 76.2293L22.8738 76.229ZM25.727 79.481C25.4529 79.7829 24.8694 79.7022 24.442 79.2896C24.0051 78.8865 23.8832 78.3144 24.1581 78.012C24.4353 77.7093 25.0224 77.7944 25.4529 78.2034C25.887 78.6057 26.0196 79.1822 25.7274 79.481H25.727ZM29.4148 80.579C29.2944 80.9704 28.732 81.1484 28.1658 80.9821C27.6003 80.8108 27.2301 80.3519 27.3442 79.9563C27.4619 79.5622 28.0266 79.3767 28.5971 79.5547C29.1618 79.7253 29.5328 80.1806 29.4152 80.579H29.4148ZM33.6123 81.0445C33.6264 81.457 33.146 81.799 32.5515 81.8064C31.9535 81.8194 31.47 81.4856 31.4637 81.0802C31.4637 80.6637 31.9331 80.3249 32.5307 80.3151C33.1252 80.3033 33.6123 80.6347 33.6123 81.0445ZM37.7353 80.8864C37.8066 81.2888 37.3933 81.7021 36.8031 81.8119C36.2228 81.9178 35.6855 81.6695 35.6114 81.2707C35.5393 80.8582 35.9604 80.4453 36.5396 80.3382C37.131 80.2355 37.66 80.4774 37.7353 80.8864Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-[1rem]">
|
||||
210+
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
Star us on GitHub
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<slot></slot>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="border-t-[1px] border-accent/40 mt-20 flex h-fit py-12 w-full justify-between footer flex-col lg:flex-row lg:px-[8rem] relative z-[20]">
|
||||
|
||||
<div class="flex items-center lg:items-start flex-col gap-7 justify-center mb-10 lg:mb-0">
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="poppins font-bold text-[1.6rem] text-text/90">
|
||||
Litlyx
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-6 text-[1.6rem] text-text-sub/80">
|
||||
<!-- <div> <i class="fab fa-x-twitter"></i> </div> -->
|
||||
<div class="flex gap-4">
|
||||
<a class="hover:text-gray-400" href="https://www.linkedin.com/company/litlyx"
|
||||
target="_blank">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
<a class="hover:text-gray-400" href="https://www.github.com/Litlyx/litlyx" target="_blank">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a class="hover:text-gray-400" href="https://x.com/litlyx" target="_blank">
|
||||
<i class="fab fa-x-twitter"></i>
|
||||
</a>
|
||||
<a class="hover:text-gray-400" href="https://dev.to/litlyx-org" target="_blank">
|
||||
<i class="fab fa-dev"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="text-[.9rem] flex flex-col lg:items-start text-center text-text-sub/80">
|
||||
<div> © 2024 Litlyx All right reserved. </div>
|
||||
<div class="ml-1 font-bold">Made with ❤ in Italy </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex gap-6 lg:gap-20 flex-col lg:flex-row text-center lg:text-start">
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
<div class="text-text-sub/60 font-semibold text-[1.3rem]"> Product </div>
|
||||
|
||||
<NuxtLink to="/blog" class="hover:text-accent cursor-pointer"> Blog </NuxtLink>
|
||||
<NuxtLink target="_blank" to="https://docs.litlyx.com" class="hover:text-accent cursor-pointer">
|
||||
Docs </NuxtLink>
|
||||
<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>
|
||||
<!-- <NuxtLink to="/" class="hover:text-accent cursor-pointer"> About </NuxtLink> -->
|
||||
<NuxtLink to="/contacts" class="hover:text-accent cursor-pointer"> Contacts </NuxtLink>
|
||||
</div>
|
||||
<div class="flex-col flex gap-4 text-center lg:text-start">
|
||||
<div class="text-text-sub/60 font-semibold text-[1.3rem]"> Legal </div>
|
||||
<NuxtLink to="/privacy" class="hover:text-accent cursor-pointer"> Privacy </NuxtLink>
|
||||
<NuxtLink to="/terms" class="hover:text-accent cursor-pointer"> Terms </NuxtLink>
|
||||
<NuxtLink to="/data_policy" class="hover:text-accent cursor-pointer"> Data policy </NuxtLink>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.banner * {
|
||||
font-family: "Nunito";
|
||||
}
|
||||
|
||||
.layout * {
|
||||
font-family: "Inter";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.animated-button {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
color: white;
|
||||
text-shadow: 0 1px 0 #000;
|
||||
width: 100%;
|
||||
|
||||
--border-angle: 0turn; // For animation.
|
||||
|
||||
--main-bg: conic-gradient(from var(--border-angle),
|
||||
rgb(17, 20, 51),
|
||||
rgb(17, 18, 34) 5%,
|
||||
rgb(17, 20, 34) 60%,
|
||||
rgb(17, 28, 51) 95%);
|
||||
|
||||
|
||||
border: solid 2px transparent;
|
||||
--gradient-border: conic-gradient(from var(--border-angle),
|
||||
transparent 25%,
|
||||
rgb(0, 136, 255),
|
||||
transparent 99%,
|
||||
transparent);
|
||||
|
||||
background:
|
||||
// padding-box clip this background in to the overall element except the border.
|
||||
var(--main-bg) padding-box,
|
||||
// border-box extends this background to the border space
|
||||
var(--gradient-border) border-box,
|
||||
// Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background.
|
||||
var(--main-bg) border-box;
|
||||
|
||||
background-position: center center;
|
||||
|
||||
animation: bg-spin 3s linear infinite;
|
||||
|
||||
@keyframes bg-spin {
|
||||
to {
|
||||
--border-angle: 1turn;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
@property --border-angle {
|
||||
syntax: "<angle>";
|
||||
inherits: true;
|
||||
initial-value: 0turn;
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +0,0 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
|
||||
export default defineNuxtConfig({
|
||||
colorMode: { preference: 'dark', },
|
||||
devtools: { enabled: false },
|
||||
app: {
|
||||
head: {
|
||||
script: [
|
||||
{
|
||||
src: 'https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js',
|
||||
'data-project': '6643cd08a1854e3b81722ab5',
|
||||
defer: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
pages: true,
|
||||
ssr: true,
|
||||
routeRules: {
|
||||
'/': {
|
||||
prerender: true
|
||||
},
|
||||
'/**': {
|
||||
prerender: true
|
||||
},
|
||||
},
|
||||
css: ['~/assets/scss/main.scss'],
|
||||
modules: ['@nuxt/ui'],
|
||||
devServer: {
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
components: true,
|
||||
extends: ['../lyx-ui']
|
||||
})
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"name": "litlyx-dashboard",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/tailwindcss": "^6.12.0",
|
||||
"nuxt": "^3.11.2",
|
||||
"sass": "^1.75.0",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.0",
|
||||
"vue3-lottie": "^3.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/ui": "^2.15.2",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.3"
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
|
||||
import { blogPosts, homePosts } from '~/blog/Blog';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="blog-home h-full flex justify-center overflow-y-auto">
|
||||
|
||||
<div class="flex flex-col gap-6 px-6 py-6 max-w-[1200px]">
|
||||
|
||||
<div class="text-center mt-8">
|
||||
<h1 class="poppins text-4xl mb-4 font-medium">
|
||||
Blog
|
||||
</h1>
|
||||
<div class="poppins text-2xl mb-4 font-normal text-white/80">
|
||||
Stay updated with latest news about Litlyx. We "Build in Public".
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-posts flex gap-10 justify-center">
|
||||
<NuxtLink tag="article" :to="'/blog/' + post.id" v-for="post of homePosts" class="flex flex-col gap-2">
|
||||
<img class="w-full h-full rounded-xl outline outline-[1px] outline-gray-100/20"
|
||||
:src="'/blog/' + post.image" :alt="post.title">
|
||||
<h4 class="font-normal mt-2"> {{ post.title }} </h4>
|
||||
<div class="flex gap-3 items-center text-[1rem]">
|
||||
<img class="w-9 h-9 rounded-full" :src="'/blog/' + post.authorImage" :alt="post.author">
|
||||
<div class="font-normal"> {{ post.author }} </div>
|
||||
<div class="text-gray-400"> • {{ post.created_at }} </div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<h5 class="mt-12 hidden"> Latest posts </h5>
|
||||
|
||||
<div class="grid-cols-3 gap-2 hidden">
|
||||
<NuxtLink tag="article" :to="'/blog/' + post.id" v-for="post of blogPosts" class="flex flex-col gap-2">
|
||||
<img class="rounded-xl outline outline-[1px] outline-gray-100/20" :src="'/blog/' + post.image"
|
||||
:alt="post.title">
|
||||
<h5 class="font-normal mt-2"> {{ post.title }} </h5>
|
||||
<div class="flex gap-3 items-center text-[.9rem]">
|
||||
<img class="w-8 h-8 rounded-full" :src="'/blog/' + post.authorImage" :alt="post.author">
|
||||
<div class="font-normal"> {{ post.author }} </div>
|
||||
<div class="text-gray-400"> • {{ post.created_at }} </div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="pb-20"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
.blog-home * {
|
||||
font-family: "Poppins"
|
||||
}
|
||||
</style>
|
||||
@@ -1,143 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
import { blogPosts } from '~/blog/Blog';
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
const route = useRoute();
|
||||
const id = route.path.replace('/blog/', '');
|
||||
const blogPost = blogPosts.value.find(e => e.id == id);
|
||||
|
||||
useSeoMeta({
|
||||
title: () => `Litlyx Blog - ${blogPost?.title}`,
|
||||
ogTitle: () => `Litlyx Blog - ${blogPost?.title}`,
|
||||
description: () => blogPost?.subtitle,
|
||||
ogDescription: () => blogPost?.subtitle,
|
||||
keywords: 'Litlyx blog, analytics insights, real-time analytics, AI-powered analytics, data visualization, performance metrics, KPI tracking, custom events, open-source analytics, business intelligence, data trends, developer insights, analytics updates, data-driven decisions, blog updates, tech news, Litlyx updates, analytics best practices',
|
||||
author: () => blogPost?.author,
|
||||
ogImage: () => 'https://litlyx.com/blog/' + blogPost?.image,
|
||||
ogType: 'website',
|
||||
ogUrl: 'https://litlyx.com/blog',
|
||||
twitterCard: 'summary_large_image',
|
||||
twitterTitle: () => `Litlyx Blog - ${blogPost?.title}`,
|
||||
twitterDescription: () => blogPost?.subtitle,
|
||||
twitterImage: () => 'https://litlyx.com/blog/' + blogPost?.image,
|
||||
ogSiteName: 'Litlyx',
|
||||
ogLocale: 'en_US',
|
||||
ogImageWidth: '1200',
|
||||
ogImageHeight: '630'
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BlogArticleWrapper>
|
||||
<div class="text-white/80">
|
||||
<section>
|
||||
<h2 class="text-3xl font-semibold">Why?</h2>
|
||||
<p>When I was a CTO at one of my previous startups, I faced significant challenges in tracking and
|
||||
analyzing
|
||||
metrics effectively. Our team needed real-time analytics, yet existing solutions
|
||||
were
|
||||
often outdated, expensive, and complicated to set up.</p>
|
||||
<p>I needed speed. Speed like a Ferrari.</p>
|
||||
<p>We started working closely with a growth hacking team at that time. With pressure from the CEO and
|
||||
the
|
||||
growth team, I had to manage a team of five developers, organize feature implementations, and set up
|
||||
analytics.</p>
|
||||
<p>It was rough.</p>
|
||||
<p>I struggled to get actionable data without a complex setup, and the lack of a lightweight,
|
||||
customizable analytics tool that was fast to implement.</p>
|
||||
<p>It was a real problem.</p>
|
||||
<p>Frustrated with the limitations of current analytics solutions, I opted for MixPanel for tracking
|
||||
custom
|
||||
events, Google Analytics for tracking visits & superficial metrics, and Clarity for tracking user
|
||||
behaviors. But… MixPanel required intricate setups for detailed event tracking, Google Analytics
|
||||
provided robust data on page visits but was hard to configure, and Clarity offered insights into
|
||||
user
|
||||
behavior but lacked real-time capabilities. There wasn’t a tool that did it all in one solution nor
|
||||
was
|
||||
created for each tech-stack out there.</p>
|
||||
<p>For this level of complexity in metrics, developers MUST be involved. period.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="text-3xl font-semibold">Why Dev-Centric</h2>
|
||||
<p>We're building Litlyx, an open-source, lightweight analytics
|
||||
platform
|
||||
designed for simplicity to empower each developer to track analytics within seconds.</p>
|
||||
<p>Our mission was to achieve a 30-seconds setup in all tech stacks.</p>
|
||||
<p>Spoiler Alert: we did!</p>
|
||||
<p>We needed to create a tool that not only tracks your KPIs but also offers high
|
||||
customization, an AI data-analyst assistant, and comprehensive
|
||||
analytics report generation.</p>
|
||||
<p>Everything about analytics with Litlyx should be Exceptionally Easy and Fast.</p>
|
||||
<p>Devs should be focusing on actual Feature implementations and not wasting-time on reading complex
|
||||
documentations.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="text-3xl font-semibold">Why now, in 2024?</h2>
|
||||
<p>The current landscape of analytics tools is outdated and fragmented. Most solutions
|
||||
were
|
||||
developed over a decade ago, primarily focusing on large enterprises and emphasizing sales-led
|
||||
growth or
|
||||
marketing.</p>
|
||||
<p>These tools often ignore the needs of developers and smaller teams. But they are essential.</p>
|
||||
<p>No one is prioritizing a developer-first analytics experience or innovating in the
|
||||
analytics space.</p>
|
||||
<p>The time has come to rethink analytics for 2024 and beyond. We need a tool that aligns with modern
|
||||
app
|
||||
development standards and provides a seamless, intuitive, and most importantly, dev-centric
|
||||
experience.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="text-3xl font-semibold">How the future looks</h2>
|
||||
<p>Litlyx aims to be the No.1 tool for analytics tracking that comes to mind for
|
||||
developers, known for efficiency, simplicity, and cost-effectiveness.</p>
|
||||
<p>We want to be the go-to solution for collecting analytics, reducing fragmentation,
|
||||
enhancing aggregation, and acting as a connector for databases and analytics tools that people
|
||||
already
|
||||
use. Our goal is to be the only place people need for everything related to analytics.</p>
|
||||
<p>We are committed to being dev-centric always.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="text-3xl font-semibold">Join us</h2>
|
||||
<p>The Litlyx Team have taken the responsibility to create the simplest yet most effective way to track
|
||||
analytics.</p>
|
||||
<p>We're building something that developers can really love.</p>
|
||||
<p>We're building it <a href="https://github.com/Litlyx/litlyx">Open-Source</a>,
|
||||
because we
|
||||
trust transparency and we know how much difficult it is to gain control on where your data goes.</p>
|
||||
<p>Probably we will make some mistakes in the process, but we are humans. We are devs!</p>
|
||||
<p>Join our journey and be among the pioneer developers to experience analytics tracking with
|
||||
Litlyx.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</BlogArticleWrapper>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.article * {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
header,
|
||||
section,
|
||||
footer {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
section h2 {
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,455 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
import { blogPosts } from '~/blog/Blog';
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
const route = useRoute();
|
||||
const id = route.path.replace('/blog/', '');
|
||||
const blogPost = blogPosts.value.find(e => e.id == id);
|
||||
|
||||
useSeoMeta({
|
||||
title: () => `Litlyx Blog - ${blogPost?.title}`,
|
||||
ogTitle: () => `Litlyx Blog - ${blogPost?.title}`,
|
||||
description: () => blogPost?.subtitle,
|
||||
ogDescription: () => blogPost?.subtitle,
|
||||
keywords: 'Litlyx blog, analytics insights, real-time analytics, AI-powered analytics, data visualization, performance metrics, KPI tracking, custom events, open-source analytics, business intelligence, data trends, developer insights, analytics updates, data-driven decisions, blog updates, tech news, Litlyx updates, analytics best practices',
|
||||
author: () => blogPost?.author,
|
||||
ogImage: () => 'https://litlyx.com/blog/' + blogPost?.image,
|
||||
ogType: 'website',
|
||||
ogUrl: 'https://litlyx.com/blog',
|
||||
twitterCard: 'summary_large_image',
|
||||
twitterTitle: () => `Litlyx Blog - ${blogPost?.title}`,
|
||||
twitterDescription: () => blogPost?.subtitle,
|
||||
twitterImage: () => 'https://litlyx.com/blog/' + blogPost?.image,
|
||||
ogSiteName: 'Litlyx',
|
||||
ogLocale: 'en_US',
|
||||
ogImageWidth: '1200',
|
||||
ogImageHeight: '630'
|
||||
})
|
||||
|
||||
const featureStyle = 'font-bold poppins text-lyx-text';
|
||||
const cellStyle = 'poppins text-lyx-text'
|
||||
const activeStyle = 'poppins !text-lyx-text border-solid border-[1px] border-green-400 bg-green-400/5'
|
||||
|
||||
|
||||
const columns = [{
|
||||
key: 'feature',
|
||||
label: 'Feature'
|
||||
}, {
|
||||
key: 'litlyx',
|
||||
label: 'Litlyx'
|
||||
}, {
|
||||
key: 'plausible',
|
||||
label: 'Plausible'
|
||||
}, {
|
||||
key: 'google',
|
||||
label: 'Google Analytics'
|
||||
}]
|
||||
|
||||
const comparisons = ref<any[]>([
|
||||
{
|
||||
feature: { text: 'Setup Time', class: featureStyle },
|
||||
litlyx: { text: '30 seconds', class: activeStyle },
|
||||
plausible: { text: 'A few Minutes', class: cellStyle },
|
||||
google: { text: 'Hours', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Real-Time Collection', class: featureStyle },
|
||||
litlyx: { text: 'Instant', class: activeStyle },
|
||||
plausible: { text: 'each 5 minutes', class: cellStyle },
|
||||
google: { text: 'from few minutes, to hours', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Documentation', class: featureStyle },
|
||||
litlyx: { text: 'Small, Easy & Modern', class: activeStyle },
|
||||
plausible: { text: 'Longer than necessary', class: cellStyle },
|
||||
google: { text: 'Mstodon & Complex', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Modern UI', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Yes', class: activeStyle },
|
||||
google: { text: 'Yes', class: activeStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Developers Centric Approach', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Partially', class: cellStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Website Loading Time', class: featureStyle },
|
||||
litlyx: { text: '3 ms', class: activeStyle },
|
||||
plausible: { text: '3 ms', class: activeStyle },
|
||||
google: { text: '5-15 ms', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Library Size', class: featureStyle },
|
||||
litlyx: { text: '3 kb', class: '' },
|
||||
plausible: { text: '2 kb', class: activeStyle },
|
||||
google: { text: 'avg. 50 kb', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Custom Events Support', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Yes', class: activeStyle },
|
||||
google: { text: 'Yes', class: activeStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Native Js Runtimes', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'No', class: cellStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Custom Events metadata Support', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'No', class: cellStyle },
|
||||
google: { text: 'Limited', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Raw Data Export', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'No', class: cellStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Data Ownership', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Yes', class: activeStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Open-Source', class: featureStyle },
|
||||
litlyx: { text: 'Self-Hostable', class: activeStyle },
|
||||
plausible: { text: 'Self-Hostable', class: activeStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Privacy-focused', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Yes', class: activeStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Cookies Stored', class: featureStyle },
|
||||
litlyx: { text: '0 Cookies', class: activeStyle },
|
||||
plausible: { text: '0 Cookies', class: activeStyle },
|
||||
google: { text: 'Yes, many', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'EU standard', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Yes', class: activeStyle },
|
||||
google: { text: 'Limited', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Ad Blockers', class: featureStyle },
|
||||
litlyx: { text: 'Impossible to block', class: activeStyle },
|
||||
plausible: { text: 'Possible, but hard!', class: cellStyle },
|
||||
google: { text: 'Possible', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'AI Data Analyst Assistant', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'No', class: cellStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Report Generation', class: featureStyle },
|
||||
litlyx: { text: 'Detailed reports in seconds', class: activeStyle },
|
||||
plausible: { text: 'Basic Reports', class: cellStyle },
|
||||
google: { text: 'Extensive, but complex to do', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'User-Friendly interface', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Yes', class: activeStyle },
|
||||
google: { text: 'Moderate Complexity', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Agglomeration from third parties DB’s', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'No', class: cellStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Free Options (Cloud)', class: featureStyle },
|
||||
litlyx: { text: 'Free-Forever plan to start.', class: activeStyle },
|
||||
plausible: { text: '30 days free trial.', class: cellStyle },
|
||||
google: { text: 'Free forever. No Ownership.', class: activeStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Cost Effective (Cloud)', class: featureStyle },
|
||||
litlyx: { text: 'Basic plan: €4,99/mo for 50k visits/events', class: activeStyle },
|
||||
plausible: { text: 'Basic plan: €9,00/mo for 10k page visits', class: cellStyle },
|
||||
google: { text: 'Offers Enterprise only Premium prices (really expansive)', class: cellStyle }
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BlogArticleWrapper>
|
||||
<div class="px-0">
|
||||
|
||||
<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:flex lg:justify-center w-full lg:flex-nowrap">
|
||||
<UTable :rows="comparisons" :columns="columns" :ui="{
|
||||
td: {
|
||||
base: 'border-x-[1px] border-solid border-lyx-widget-lighter'
|
||||
},
|
||||
th: {
|
||||
base: 'border-[1px] border-solid border-lyx-widget-lighter bg-lyx-widget'
|
||||
}
|
||||
}">
|
||||
|
||||
<template #litlyx-data="{ row }">
|
||||
{{ row.litlyx.text }}
|
||||
</template>
|
||||
<template #feature-data="{ row }">
|
||||
{{ row.feature.text }}
|
||||
</template>
|
||||
<template #plausible-data="{ row }">
|
||||
{{ row.plausible.text }}
|
||||
</template>
|
||||
<template #google-data="{ row }">
|
||||
{{ row.google.text }}
|
||||
</template>
|
||||
</UTable>
|
||||
</div>
|
||||
|
||||
<div class="lg:hidden text-lyx-text-dark">
|
||||
[Table available only on desktop]
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">
|
||||
<div class="title">
|
||||
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="title">
|
||||
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 class="section">
|
||||
|
||||
<div class="title text-center">
|
||||
Ready to start with Litlyx?
|
||||
</div>
|
||||
|
||||
<div class="button-container flex-col items-center gap-6">
|
||||
<LyxUiButton link="https://dashboard.litlyx.com/live_demo" target="_blank" class="button"
|
||||
type="outline">
|
||||
Go to Live Demo
|
||||
</LyxUiButton>
|
||||
<LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
|
||||
Start for free now
|
||||
</LyxUiButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</BlogArticleWrapper>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.article * {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
header,
|
||||
section,
|
||||
footer {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
section h2 {
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply font-medium text-[1rem] px-6 py-2
|
||||
}
|
||||
|
||||
.button-container {
|
||||
@apply flex justify-center mt-8
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
|
||||
|
||||
<div class="tutto-poppins flex flex-col gap-3 px-2 lg:px-96 mt-20 text-[1.2rem] leading-[2rem]">
|
||||
|
||||
<div class="flex justify-center flex-col items-center">
|
||||
<div class="font-bold text-[2rem]"> Contact us </div>
|
||||
<div class="font-bold mb-1 mt-4 text-accent">
|
||||
<a href="mailto:help@litlyx.com">help@litlyx.com </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang=scss>
|
||||
.tutto-poppins * {
|
||||
font-family: "Poppins";
|
||||
}
|
||||
</style>
|
||||
@@ -1,231 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
|
||||
|
||||
<div class="tutto-poppins flex flex-col gap-3 px-2 lg:px-96 mt-20 text-[1.2rem] leading-[2rem]">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="font-bold text-[2rem]">
|
||||
LitLyx Analytics Data Policy
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-500/90 h-[1px] w-full my-6"></div>
|
||||
|
||||
<div>
|
||||
LitLyx is committed to protecting your privacy and ensuring that our data practices are transparent, secure,
|
||||
and compliant with all relevant regulations. This data policy outlines the information we collect, how we
|
||||
use it, and the measures we take to protect your data. Our services are hosted on servers provided by
|
||||
Hetzner in Nuremberg, Germany, and comply with European data protection laws, including GDPR, CCPA, and
|
||||
PECR.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Data Collection and Usage : </div>
|
||||
<div>
|
||||
LitLyx is designed to provide insightful analytics without compromising user privacy. We adhere to the
|
||||
following principles:
|
||||
</div>
|
||||
<ul>
|
||||
<div class="ml-8"> 1. Non-Personal Data Collection: We do not collect personal data or personally
|
||||
identifiable information (PII). Our analytics focus on aggregated data to identify trends without
|
||||
tracking individual users.</div>
|
||||
<div class="ml-8"> 2 No Cookies or Persistent Identifiers: We do not use cookies, browser storage, or any
|
||||
form of persistent identifiers. All data is session-based and anonymized. </div>
|
||||
</ul>
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Specific Data Points Collected </div>
|
||||
<div>We collect only the most essential data points, which are:</div>
|
||||
<ul>
|
||||
<div class="ml-8"> • Page URL: We track the URLs of pages viewed on your website to understand which pages
|
||||
are most popular. Query parameters and hash parameters are discarded.
|
||||
</div>
|
||||
<div class="ml-8"> • HTTP Referrer: This helps us determine the source of your traffic by identifying the
|
||||
referring website. </div>
|
||||
<div class="ml-8"> • Browser: We track the browser type and version (derived from the User-Agent header) to
|
||||
understand the technology used by visitors. The full User-Agent string is discarded.
|
||||
</div>
|
||||
<div class="ml-8"> • Operating System: We identify the operating system and its version (derived from the
|
||||
User-Agent header) to see what systems visitors use. The full User-Agent string is discarded.</div>
|
||||
<div class="ml-8"> • Device Type: We categorize devices into desktop, mobile, or tablet based on the
|
||||
User-Agent header. </div>
|
||||
<div class="ml-8"> • Geographical Location: We determine the visitor's country, region, and city using their
|
||||
IP address. We do not track anything more granular than the city level, and IP addresses are not stored.
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Unique User Counting Without Cookies </div>
|
||||
|
||||
<div>
|
||||
Counting unique visitors is crucial for analytics, but we prioritize visitor privacy. We do not generate
|
||||
persistent identifiers. Instead, we use a combination of the visitor's IP address and User-Agent to create a
|
||||
unique identifier for each day.
|
||||
</div>
|
||||
<div>
|
||||
|
||||
Formula for Unique User Identification -
|
||||
Every HTTP request includes the IP address and User-Agent. To generate a unique identifier while maintaining
|
||||
anonymity, we apply the following process:
|
||||
</div>
|
||||
|
||||
<div class="bg-menu font-normal px-8 py-4 text-[1.1rem]" style="font-family:Consolas">
|
||||
hash(daily_salt + strip(website_domain) + strip(ip_address) + user_agent)
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<div class="ml-8"> • Daily Salt: A randomly generated value that changes daily.</div>
|
||||
<div class="ml-8"> • Website Domain: The domain of the website being visited.</div>
|
||||
<div class="ml-8"> • IP Address and User-Agent: Used to create a unique but anonymized identifier.</div>
|
||||
<div class="ml-8"> • Strip function: Used to transform string in only [A-z0-9]</div>
|
||||
</ul>
|
||||
|
||||
<div>This identifier is used to count unique visitors for a single day. The raw IP addresses and User-Agent
|
||||
strings are never stored. Daily salts are deleted every 24 hours to prevent linking visitor data across
|
||||
days.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Custom Events and Custom Events Metadata </div>
|
||||
<div>
|
||||
At LitLyx, we understand the importance of flexibility and customization in web analytics. To cater to
|
||||
specific needs, we allow the tracking of custom events and the storage of custom events metadata. This
|
||||
section outlines how we manage these custom events while ensuring privacy and compliance with relevant
|
||||
regulations.
|
||||
</div>
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Tracking Custom Events </div>
|
||||
<div>
|
||||
Custom events allow you to track specific interactions on your website beyond standard page views. These
|
||||
interactions might include button clicks, form submissions, or other user actions that are important for
|
||||
understanding user behavior on your site.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Data Points for Custom Events </div>
|
||||
|
||||
<ul>
|
||||
<div class="ml-8"> • Event Name: A descriptive name for the event (e.g., "Button Click", "Form Submission").
|
||||
</div>
|
||||
<div class="ml-8"> • Event Metadata: Additional metadata associated with the event (e.g., button ID,
|
||||
form ID).</div>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- <div class="font-bold mb-1 mt-4"> Storing Custom Events Metadata </div>
|
||||
<div>
|
||||
In addition to tracking custom events, we provide the capability to store metadata related to these events.
|
||||
This metadata can include any additional information you deem relevant, such as user attributes or
|
||||
contextual details about the event.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Formula for Storing Custom Events Metadata -
|
||||
To ensure the privacy and security of custom events metadata, we use a hashing mechanism. The metadata is
|
||||
combined with the project ID and hashed before being stored in our database. This process ensures that the
|
||||
metadata is anonymized and cannot be linked back to individual users.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Hashing Formula for Custom Events Metadata -
|
||||
We use the following formula to hash the custom events metadata:
|
||||
</div>
|
||||
|
||||
<div>
|
||||
“Hash(text{project_id} + text{metadata as string})”
|
||||
</div>
|
||||
|
||||
|
||||
<ul>
|
||||
<div class="ml-8">
|
||||
• Project ID: The unique identifier for your project.
|
||||
</div>
|
||||
<div class="ml-8">
|
||||
• Metadata as String: The string representation of the custom events metadata.
|
||||
</div>
|
||||
</ul>
|
||||
-->
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Data Hosting and Security </div>
|
||||
<ul>
|
||||
<div class="ml-8">
|
||||
• Hosting: All data is hosted on Hetzner servers in Nuremberg, Germany. These servers are powered by
|
||||
100% renewable energy and comply with EU data protection laws.
|
||||
</div>
|
||||
<div class="ml-8">
|
||||
• Security Measures: We use HTTPS for data transmission and employ hashing processes for data at rest.
|
||||
Regular backups are performed and stored within the EU in redundant locations.
|
||||
</div>
|
||||
<div class="ml-8">
|
||||
• No Third-Party Access: Apart from Hetzner, no third-party vendors have access to the data. This ensures
|
||||
all data remains within the EU and is protected by strict European privacy laws.
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Tracking Custom Events </div>
|
||||
<div>
|
||||
Custom events allow you to track specific interactions on your website beyond standard page views. These
|
||||
interactions might include button clicks, form submissions, or other user actions that are important for
|
||||
understanding user behavior on your site.
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Data Ownership </div>
|
||||
<div>
|
||||
LitLyx respects that you own your website data. We do not sell, share, or monetize your data. You retain
|
||||
full control over your data, with the ability to delete your account or data at any time. Upon deletion, all
|
||||
data is permanently removed from our servers and cannot be recovered.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Trust and Transparency </div>
|
||||
<div>
|
||||
LitLyx is built on principles of transparency and openness. While our analytics tools are proprietary, we
|
||||
adhere strictly to our privacy commitments. Our policies and processes are open for review to ensure we meet
|
||||
our stated objectives.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Compliance with GDPR, CCPA, and PECR </div>
|
||||
<div>
|
||||
Using LitLyx ensures compliance with GDPR, CCPA, and PECR regulations. Our data practices eliminate the need
|
||||
for complex privacy policies or intrusive cookie prompts. Visitors to your website can enjoy a seamless and
|
||||
privacy-respecting experience.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Liability </div>
|
||||
<ul>
|
||||
<div class="ml-8">
|
||||
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<div> Contact Information </div>
|
||||
<div>
|
||||
For any questions or concerns about our data policy, please contact our data protection officer at
|
||||
<a class="text-blue-400" href="mailto:help@litlyx.com">help@litlyx.com</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang=scss>
|
||||
.tutto-poppins * {
|
||||
font-family: "Poppins";
|
||||
}
|
||||
</style>
|
||||
@@ -1,481 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
const autoscroll = ref<HTMLElement>();
|
||||
|
||||
const x = ref<number>();
|
||||
const y = ref<number>();
|
||||
|
||||
let mouseMoveHandler: any;
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('mousemove', mouseMoveHandler);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
mouseMoveHandler = function (e: MouseEvent) {
|
||||
x.value = e.screenX;
|
||||
y.value = e.screenY;
|
||||
}
|
||||
document.addEventListener('mousemove', mouseMoveHandler);
|
||||
});
|
||||
|
||||
const blobSize = 40 * 16;
|
||||
|
||||
const mouseStyle = computed(() => {
|
||||
if (!x.value) return;
|
||||
if (!y.value) return;
|
||||
return `top: ${y.value - (blobSize / 2)}px; left: ${x.value - (blobSize / 2)}px; width: ${blobSize}px; height: ${blobSize}px;`
|
||||
});
|
||||
|
||||
|
||||
|
||||
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);
|
||||
|
||||
|
||||
async function saveEmail() {
|
||||
await fetch('https://savemail.litlyx.com/email/' + encodeURIComponent(email.value), {
|
||||
mode: 'no-cors'
|
||||
});
|
||||
email.value = '';
|
||||
alert('We will keep you updated');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
|
||||
<div class="flex justify-center home relative">
|
||||
|
||||
<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 !mt-6">
|
||||
|
||||
<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 gap-3 flex-col lg:flex-row items-center">
|
||||
<LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
|
||||
Start for free
|
||||
</LyxUiButton>
|
||||
<LyxUiButton link="https://dashboard.litlyx.com/live_demo" target="_blank" class="button"
|
||||
type="outline">
|
||||
Go to live demo
|
||||
</LyxUiButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<img :src="'screenshot.png'" alt="Litlyx dashboard">
|
||||
</div>
|
||||
|
||||
<div class="text-center poppins mt-8">
|
||||
Trusted by
|
||||
<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>
|
||||
|
||||
|
||||
<div class="section">
|
||||
|
||||
<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 :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">
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<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 link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
|
||||
Start for free
|
||||
</LyxUiButton>
|
||||
</div>
|
||||
|
||||
</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="mt-8 flex justify-center">
|
||||
<img :src="'techs-new.png'" alt="Techs">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<LyxUiCard class="section w-full p-8">
|
||||
<div class="subtitle">
|
||||
Why choose Litlyx
|
||||
</div>
|
||||
|
||||
<div class="paragraph">
|
||||
Litlyx vs Plausible vs Google Analytics
|
||||
</div>
|
||||
|
||||
<div class="button-container">
|
||||
<LyxUiButton link="/why-choose-litlyx" target="_blank" class="button" type="outline">
|
||||
Read more
|
||||
</LyxUiButton>
|
||||
</div>
|
||||
</LyxUiCard>
|
||||
|
||||
|
||||
|
||||
<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 flex justify-center">
|
||||
<img class="lg:h-[35rem]" :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 flex justify-center">
|
||||
<img :src="'placeholder.jpg'" alt="Placeholder">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="button-container">
|
||||
<LyxUiButton link="https://dashboard.litlyx.com/live_demo" target="_blank" class="button"
|
||||
type="outline">
|
||||
Go to live demo
|
||||
</LyxUiButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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 flex justify-center">
|
||||
<img class="scale-125 lg:scale-100 lg:h-[35rem]" :src="'ai-chat.png'" alt="Ai-Chat">
|
||||
</div>
|
||||
|
||||
<div class="button-container">
|
||||
<LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
|
||||
Start for free
|
||||
</LyxUiButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
|
||||
|
||||
<div class="subtitle">
|
||||
Our users loves Litlyx's simplicity
|
||||
</div>
|
||||
|
||||
<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 class="w-full h-full" name="Alessio - CEO" sub="Founder" link-text="@NuvolAI"
|
||||
link="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 class="w-full h-full" name="Liam - 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 paid the 9,99 subscription. We are happy about the service they provide for our online Ecommerce selling Camper equipments.">
|
||||
</Testimonial>
|
||||
|
||||
</div>
|
||||
</ClientOnly>
|
||||
|
||||
</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 link="https://github.com/Litlyx/litlyx" target="_blank" class="button"
|
||||
type="secondary">
|
||||
Leave a Star on Github!
|
||||
</LyxUiButton>
|
||||
</div>
|
||||
|
||||
</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" @click="saveEmail()">
|
||||
Keep me updated
|
||||
</LyxUiButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</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]
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.headline {
|
||||
@apply text-[4rem]
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@apply text-[2.3rem]
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
@apply text-[1.5rem]
|
||||
}
|
||||
|
||||
.section {
|
||||
@apply mt-32
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.footer * {
|
||||
font-family: "Poppins";
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-style: dashed !important;
|
||||
}
|
||||
|
||||
|
||||
.blob {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 13rem;
|
||||
background: linear-gradient(197.37deg, #7450DB -0.38%, rgba(138, 234, 240, 0) 101.89%), linear-gradient(115.93deg, #3E88F6 4.86%, rgba(62, 180, 246, 0.33) 38.05%, rgba(62, 235, 246, 0) 74.14%), radial-gradient(56.47% 76.87% at 6.92% 7.55%, rgba(62, 136, 246, 0.7) 0%, rgba(62, 158, 246, 0.182) 52.16%, rgba(62, 246, 246, 0) 100%), linear-gradient(306.53deg, #2EE4E3 19.83%, rgba(46, 228, 227, 0) 97.33%);
|
||||
background-blend-mode: normal, normal, normal, normal, normal, normal;
|
||||
filter: blur(100px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.animated-button {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
color: white;
|
||||
text-shadow: 0 1px 0 #000;
|
||||
width: 100%;
|
||||
|
||||
--border-angle: 0turn; // For animation.
|
||||
|
||||
--main-bg: conic-gradient(from var(--border-angle),
|
||||
rgb(17, 20, 51),
|
||||
rgb(17, 18, 34) 5%,
|
||||
rgb(17, 20, 34) 60%,
|
||||
rgb(17, 28, 51) 95%);
|
||||
|
||||
|
||||
border: solid 2px transparent;
|
||||
--gradient-border: conic-gradient(from var(--border-angle),
|
||||
transparent 25%,
|
||||
rgb(0, 136, 255),
|
||||
transparent 99%,
|
||||
transparent);
|
||||
|
||||
background:
|
||||
// padding-box clip this background in to the overall element except the border.
|
||||
var(--main-bg) padding-box,
|
||||
// border-box extends this background to the border space
|
||||
var(--gradient-border) border-box,
|
||||
// Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background.
|
||||
var(--main-bg) border-box;
|
||||
|
||||
background-position: center center;
|
||||
|
||||
animation: bg-spin 3s linear infinite;
|
||||
|
||||
@keyframes bg-spin {
|
||||
to {
|
||||
--border-angle: 1turn;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
@property --border-angle {
|
||||
syntax: "<angle>";
|
||||
inherits: true;
|
||||
initial-value: 0turn;
|
||||
}
|
||||
</style>
|
||||
@@ -1,318 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import type { PricingCardProp } from '~/components/pricing/PricingCardGeneric.vue';
|
||||
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
|
||||
const freePricing: PricingCardProp[] = [
|
||||
{
|
||||
title: 'Free',
|
||||
price: '€0 / mo',
|
||||
subs: [
|
||||
'Up to 5000 visits/events per month',
|
||||
'CPM 0€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Email support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 10',
|
||||
'Server type: SHARED',
|
||||
'Data retention: 2 Months'
|
||||
],
|
||||
cta: 'Start For Free now!'
|
||||
},
|
||||
]
|
||||
|
||||
const customPricing: PricingCardProp[] = [
|
||||
{
|
||||
title: 'Enterprise',
|
||||
price: 'Custom',
|
||||
subs: [
|
||||
'Unlimited visits/events per month',
|
||||
'Service Tailor-made on needs'
|
||||
],
|
||||
features: [
|
||||
'Priority support',
|
||||
'Server type: DEDICATED',
|
||||
'DB instance: DEDICATED',
|
||||
'Dedicated operator',
|
||||
'White label',
|
||||
'Custom Data Aggregation'
|
||||
],
|
||||
cta: 'Let\'s Talk!',
|
||||
link: 'mailto:help@litlyx.com'
|
||||
}
|
||||
]
|
||||
|
||||
const slidePricings: PricingCardProp[] = [
|
||||
{
|
||||
title: 'Incubation',
|
||||
price: '€4,99 / mo',
|
||||
subs: [
|
||||
'Up to 50.000 visits/events per month',
|
||||
'CPM 0,10€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Slack support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 30',
|
||||
'Server type: SHARED',
|
||||
'Data retention: 6 Months'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard'
|
||||
},
|
||||
{
|
||||
title: 'Acceleration',
|
||||
price: '€9,99 / mo',
|
||||
subs: [
|
||||
'Up to 150.000 visits/events per month',
|
||||
'CPM 0,06€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Slack support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 100',
|
||||
'Server type: SHARED',
|
||||
'Data retention: 9 Months'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard'
|
||||
},
|
||||
{
|
||||
title: 'Growth',
|
||||
price: '€29,99 / mo',
|
||||
subs: [
|
||||
'Up to 500.000 visits/events per month',
|
||||
'CPM 0,059€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Slack support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 3.000',
|
||||
'Server type: SHARED',
|
||||
'Data retention: 1 Year'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard'
|
||||
},
|
||||
{
|
||||
title: 'Expansion',
|
||||
price: '€59,99 / mo',
|
||||
subs: [
|
||||
'Up to 1.000.000 visits/events per month',
|
||||
'CPM 0,059€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Slack support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 5.000',
|
||||
'Server type: SHARED',
|
||||
'Data retention: 1 Year'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard'
|
||||
},
|
||||
{
|
||||
title: 'Scaling',
|
||||
price: '€99,99 / mo',
|
||||
subs: [
|
||||
'Up to 2.500.000 visits/events per month',
|
||||
'CPM 0,039€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Slack support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 10.000',
|
||||
'Server type: DEDICATED',
|
||||
'Data retention: 2 Years'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard'
|
||||
},
|
||||
{
|
||||
title: 'Unicorn',
|
||||
price: '€149,99 / mo',
|
||||
subs: [
|
||||
'Up to 5.000.000 visits/events per month',
|
||||
'CPM 0,029€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Slack support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 20.000',
|
||||
'Server type: DEDICATED',
|
||||
'Data retention: 3 Years'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
|
||||
<div class="home h-full w-full min-h-[40dvh]">
|
||||
|
||||
<div class="text-center mt-8">
|
||||
<div class="poppins text-4xl mb-4 font-medium">
|
||||
Pricing
|
||||
</div>
|
||||
<div class="poppins text-2xl mb-4 font-normal text-white/80 px-8">
|
||||
Start for Free and scale as you go
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
|
||||
<div class="flex gap-12 h-max flex-col lg:flex-row justify-center">
|
||||
<PricingCardGeneric :datas="freePricing">
|
||||
</PricingCardGeneric>
|
||||
<PricingCardGeneric :datas="slidePricings">
|
||||
</PricingCardGeneric>
|
||||
<PricingCardGeneric :datas="customPricing">
|
||||
</PricingCardGeneric>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<LyxUiCard class="w-full mt-6 max-w-[96rem]">
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="flex flex-col gap-3">
|
||||
<div>
|
||||
<span class="text-lyx-primary font-semibold text-[1.4rem]">
|
||||
LIFETIME DEAL
|
||||
</span>
|
||||
<span class="text-lyx-text-dark text-[.8rem]"> (Growth plan) </span>
|
||||
</div>
|
||||
<div class="text-[2rem]"> € 2.399,00 </div>
|
||||
<div> Up to 500.000 visits/events per month </div>
|
||||
<LyxUiButton type="primary" link="https://dashboard.litlyx.com"> Start for free now </LyxUiButton>
|
||||
</div>
|
||||
<div class="flex justify-evenly grow flex-col gap-2 lg:gap-0 lg:flex-row mt-4 lg:mt-0">
|
||||
<div class="flex flex-col justify-evenly gap-2 lg:gap-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<img class="h-6" :src="'/check.png'" alt="Check">
|
||||
<div> Slack support </div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<img class="h-6" :src="'/check.png'" alt="Check">
|
||||
<div> Unlimited domanis </div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<img class="h-6" :src="'/check.png'" alt="Check">
|
||||
<div> Unlimited reports </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-evenly gap-2 lg:gap-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<img class="h-6" :src="'/check.png'" alt="Check">
|
||||
<div> AI Tokens: 3.000 / month </div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<img class="h-6" :src="'/check.png'" alt="Check">
|
||||
<div> Server type: SHARED </div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<img class="h-6" :src="'/check.png'" alt="Check">
|
||||
<div> Data retention: 5 Years </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LyxUiCard>
|
||||
</div>
|
||||
|
||||
<!-- <div class="flex gap-8 h-max flex-col lg:flex-row">
|
||||
<PricingCard class="flex-1" :data="starterTierCardData"></PricingCard>
|
||||
<PricingCard class="flex-1" :data="accelerationTierCardData"></PricingCard>
|
||||
<PricingCard class="flex-1" :data="expansionTierCardData"></PricingCard>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center md:flex-row flex-col mt-10">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="poppins text-[2rem] font-semibold">
|
||||
Book a demo!
|
||||
</div>
|
||||
<div class="poppins text-[1.2rem] text-text/90">
|
||||
Take a slot & talk with <span class="text-accent font-semibold "> Antonio | CEO at
|
||||
Litlyx.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-fit flex justify-center mt-10">
|
||||
<div class="bg-[#303030] rounded-lg py-4 w-full text-center lg:px-20">
|
||||
<a href="https://cal.com/litlyx/15min" target="_blank" class="poppins text-[1.3rem]">
|
||||
Schedule now!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="flex justify-between items-center mt-10">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="poppins text-[2rem] font-semibold">
|
||||
Do you need help ?
|
||||
</div>
|
||||
<div class="poppins text-[1.2rem] text-text/90">
|
||||
We respond in max. 1-2 days
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-4 px-20 bg-[#303030] rounded-lg">
|
||||
<a href="mailto:help@litlyx.com" class="poppins text-[1.3rem]">
|
||||
help@litlyx.com
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
<div class="px-8 mt-8 flex flex-col items-center">
|
||||
<div class="poppins text-4xl mb-4 font-medium">
|
||||
Frequently Asked Questions
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<UAccordion :ui="{
|
||||
wrapper: 'w-full',
|
||||
item: {
|
||||
padding: 'pl-8',
|
||||
}
|
||||
}" color="white" variant="ghost" size="xl" :items="[
|
||||
{
|
||||
label: 'Is Litlyx free?',
|
||||
content: 'We offer a free-forever plan with a 5k/mo limit and 2 months of data retention. We offer plans that grow with you.'
|
||||
},
|
||||
{
|
||||
label: 'What does \'Data Retention\' mean?',
|
||||
content: 'It is the duration your data is available in our database. After the data retention period expires, you will be notified via e-mail. You have 14 days to upgrade to a new plan. If not upgraded, we will start deleting data one day at a time to make space for new data.'
|
||||
},
|
||||
{
|
||||
label: 'Can I export my data?',
|
||||
content: 'Yes! We provide access to raw data, allowing you to download a CSV file and use your data as you wish. It’s always yours!'
|
||||
},
|
||||
{
|
||||
label: 'Is the data collected privacy-focused?',
|
||||
content: 'Yes! All data we collect is anonymous. We have our own tracking system. You can find more details in our Data Policy.'
|
||||
},
|
||||
{
|
||||
label: 'Can I self-host Litlyx?',
|
||||
content: 'Yes! You can self-host your own instance of Litlyx. More information is available on docs.'
|
||||
},
|
||||
{
|
||||
label: 'Did this FAQ help you?',
|
||||
content: 'If you have any more questions or need further clarification, please contact us at help@litlyx.com.'
|
||||
}
|
||||
|
||||
]">
|
||||
</UAccordion>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -1,122 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
|
||||
|
||||
<div class="tutto-poppins flex flex-col gap-3 px-2 lg:px-96 mt-20 text-[1.2rem] leading-[2rem]">
|
||||
|
||||
<div class="font-bold text-[2rem]">
|
||||
LitLyx Privacy Policy
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-500/90 h-[1px] w-full my-6"></div>
|
||||
|
||||
<div>
|
||||
For our beloved litlyx.com visitors and users.
|
||||
This document outlines our commitment to privacy for all visitors and users.
|
||||
</div>
|
||||
<div>
|
||||
At LitLyx Analytics, your privacy is really important. We avoid using cookies and never gather personal
|
||||
information. Should you opt to register an account, only essential details are requested, and these are
|
||||
shared
|
||||
exclusively with crucial services required for app functionality.
|
||||
</div>
|
||||
<div>
|
||||
LitLyx Analytics (SaaS) adheres strictly to GDPR and other relevant privacy standards both on
|
||||
our site and within our analytics tool. We prioritize the confidentiality of your information—it belongs to
|
||||
you, not us. This policy details the types of data we gather, the handling process, and your rights over
|
||||
your data. We are committed to never selling your data—this has always been our stance.
|
||||
</div>
|
||||
<div>
|
||||
For those using the LitLyx Analytics script on their sites, refer to our detailed data policy to understand
|
||||
what
|
||||
we collect on your behalf regarding site visitors.
|
||||
</div>
|
||||
<div class="font-bold mb-1 mt-4">Visitor privacy on litlyx.com includes:</div>
|
||||
<ul>
|
||||
<div class="ml-8"> • No collection of personal details</div>
|
||||
<div class="ml-8"> • No browser cookie storage </div>
|
||||
<div class="ml-8"> • No data sharing with third parties or advertisers </div>
|
||||
<div class="ml-8"> • No collection or analysis of personal or behavioral trends </div>
|
||||
<div class="ml-8"> • No monetization of data </div>
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
We deploy the LitLyx Analytics script solely to accumulate anonymous statistical data, aiming to analyze
|
||||
general
|
||||
website traffic trends without tracking individual users. All collected data is aggregated, and no personal
|
||||
information is captured. Our live demo page showcases the accessible data, including referral sources, top
|
||||
visited pages, session durations, and device specifics like type, OS, country, and browser.
|
||||
</div>
|
||||
<div class="font-bold mb-1 mt-4"> As a LitLyx Analytics subscriber: </div>
|
||||
<div>
|
||||
Our core principle is minimal data collection—only what is essential for delivering the services you
|
||||
register
|
||||
for. We select trusted external providers who comply with stringent data security and privacy regulations.
|
||||
Information shared with them is strictly necessary for their services, and they are contractually obliged to
|
||||
maintain confidentiality and adhere to our processing directives.
|
||||
</div>
|
||||
<div>
|
||||
Here's a practical overview
|
||||
</div>
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Collected data and usage:</div>
|
||||
<ul>
|
||||
<div class="ml-8">
|
||||
• Email address: Required for account setup to enable login, personalization, and to send you necessary
|
||||
communications like invoices or updates.
|
||||
</div>
|
||||
<div class="ml-8">
|
||||
• Persistent first-party cookie: Facilitates seamless login across sessions, improving usability. You
|
||||
control cookie settings via your browser, including their deletion.
|
||||
</div>
|
||||
<div class="ml-8">
|
||||
• Data security: All collected data is securely encrypted and stored on renewable
|
||||
energy-powered servers in Nuremberg, Germany, adhering to EU data privacy laws. Your data does not
|
||||
leave the EU.
|
||||
</div>
|
||||
<div class="ml-8">
|
||||
•Payment processing: Handled by Stripe, with detailed privacy information
|
||||
available on their site.
|
||||
</div>
|
||||
<div class="ml-8">
|
||||
• Email communication: Managed by European providers Gmail or Brevo, with disabled tracking features.
|
||||
Full privacy details are available on their respective sites.
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Data retention: </div>
|
||||
<div>
|
||||
Your data remains with us as long as your account is active or as needed to deliver services. It is used in
|
||||
line
|
||||
with this policy and retained to fulfill legal obligations, resolve disputes, and protect LitLyx’s rights.
|
||||
You
|
||||
may delete your account anytime, which results in immediate and permanent data deletion.
|
||||
</div>
|
||||
<div class="font-bold mb-1 mt-4"> Updates and inquiries: </div>
|
||||
<div>
|
||||
We update this policy as necessary to stay compliant and reflect new practices. Significant changes are
|
||||
communicated through our blog, social media, and direct emails.
|
||||
</div>
|
||||
<div>
|
||||
Please reach out to us at <a href="mailto:help@litlyx.com" class=text-blue-400>help@litlyx.com</a> with any questions or concerns regarding this privacy policy
|
||||
or
|
||||
your rights.
|
||||
</div>
|
||||
<div class="font-bold mb-1 mt-4"> Last updated: May 1, 2024 </div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang=scss>
|
||||
.tutto-poppins * {
|
||||
font-family: "Poppins";
|
||||
}
|
||||
</style>
|
||||
@@ -1,176 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
|
||||
|
||||
<div class="tutto-poppins flex flex-col gap-3 px-2 lg:px-96 mt-20 text-[1.2rem] leading-[2rem]">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="font-bold text-[2rem]">
|
||||
LitLyx Analytics Terms of Service
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-500/90 h-[1px] w-full my-6"></div>
|
||||
|
||||
<div>
|
||||
Welcome, and thank you for choosing LitLyx Analytics! The terms “company”, “we”, “our”, “us”, “service”, and
|
||||
“services” throughout this document refer to LitLyx Analytics.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Important Note: </div>
|
||||
<div>
|
||||
These Terms of Service are applicable solely to LitLyx Analytics Cloud. They do not apply to LitLyx
|
||||
Analytics
|
||||
Self-Hosted, which you would manage on your own servers.
|
||||
We may revise these Terms of Service in the future. Significant changes will be announced via email, our
|
||||
blog or
|
||||
socials.
|
||||
By utilizing our service now or in the future, you accept the most recent version of these Terms of Service.
|
||||
This applies to all our current and upcoming products and any new features added to our service. Not
|
||||
exercising
|
||||
or enforcing any rights or provisions of these Terms does not constitute a waiver of such rights or
|
||||
provisions.
|
||||
Please note these terms include limitations on our liability. Our Data Processing Agreement (DPA) under the
|
||||
European General Data Protection Regulation (GDPR) is incorporated into these Terms.
|
||||
If you disagree with these Terms, please refrain from using our service. Violating these terms may lead to
|
||||
the
|
||||
termination of your account. We value your trust highly, and we strive to be transparent about our
|
||||
operations
|
||||
and responsive to your feedback.
|
||||
</div>
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Account Terms</div>
|
||||
<ul>
|
||||
<div class="ml-8"> • You must secure your account and password. LitLyx Analytics is not liable for losses or
|
||||
damages resulting from
|
||||
your failure to protect your login information.</div>
|
||||
<div class="ml-8"> • You are accountable for all activities conducted under your account—even by others who
|
||||
have access to your
|
||||
account. </div>
|
||||
<div class="ml-8"> • You must not use our service for illegal purposes or in violation of any local laws.
|
||||
</div>
|
||||
<div class="ml-8"> • You must provide a legal full name and a valid email address to complete the signup
|
||||
process.</div>
|
||||
<div class="ml-8"> • Only humans can register accounts. Registrations by bots or automated methods are not
|
||||
allowed. </div>
|
||||
</ul>
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Payment, Refunds, Upgrading, and Downgrading Terms</div>
|
||||
<ul>
|
||||
<div class="ml-8"> • Our free trial details, including duration, are provided at signup. No credit card is
|
||||
needed for the trial,
|
||||
and your data is not sold. Post-trial, payment is required in advance to continue service use. Unpaid
|
||||
accounts
|
||||
will be frozen until payment is received. Accounts frozen for 60 days will be scheduled for
|
||||
auto-cancellation.</div>
|
||||
<div class="ml-8"> • Upgrading from a free trial to a paid plan incurs immediate charges, and the billing
|
||||
cycle begins on the
|
||||
upgrade day. </div>
|
||||
<div class="ml-8"> • Payments are processed automatically via credit card or Stripe.</div>
|
||||
<div class="ml-8"> • Pageviews purchased must be used within the term; unused pageviews are forfeited.</div>
|
||||
<div class="ml-8"> • No additional charges for occasional traffic spikes. No surprise fees. </div>
|
||||
<div class="ml-8"> • Exceeding the pageview limit of your plan for two consecutive months prompts a
|
||||
notification to upgrade. You
|
||||
have two weeks to respond, either continuing with a higher plan or cancelling. </div>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Cancellation and Termination</div>
|
||||
<ul>
|
||||
<div class="ml-8"> • You are solely responsible for properly cancelling your account. Email cancellation is
|
||||
not recognized.
|
||||
Cancellation instructions are provided.</div>
|
||||
<div class="ml-8"> • Cancellations take effect at the end of the current paid period; no further charges
|
||||
will be incurred.
|
||||
Post-cancellation, your stats are inaccessible and eventually permanently deleted from backups after 60
|
||||
days.</div>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Modifications to the Service and Prices</div>
|
||||
<ul>
|
||||
<div class="ml-8">
|
||||
• We reserve the right to modify or discontinue any part of the service with or without notice.
|
||||
</div>
|
||||
<div class="ml-8">
|
||||
• Pricing changes may exempt existing customers, but we reserve the right to change prices for current
|
||||
users
|
||||
with 30 days notice via email or blog post.
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Privacy and Security of Your Data </div>
|
||||
<ul>
|
||||
<div class="ml-8">
|
||||
• We implement various security measures like backups, redundancies, and encryption to secure your data.
|
||||
You
|
||||
agree that we may process your site data as detailed in our data policy.
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> General Conditions </div>
|
||||
<ul>
|
||||
<div class="ml-8">
|
||||
• The service is provided on an "as is" and "as available" basis. While we strive for uptime, access to
|
||||
the
|
||||
service is not guaranteed.
|
||||
</div>
|
||||
<div class="ml-8">
|
||||
• We aim to design our services to meet diverse needs, but they may not meet every individual
|
||||
expectation.
|
||||
</div>
|
||||
<div class="ml-8">
|
||||
• We extensively test our features, but the possibility of bugs remains. We prioritize fixing
|
||||
significant bugs,
|
||||
especially those affecting security or privacy.
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Liability </div>
|
||||
<ul>
|
||||
<div class="ml-8">
|
||||
• You expressly understand and agree that LitLyx Analytics shall not be liable, in law or in equity, to
|
||||
you or
|
||||
to any third party for any direct, indirect, incidental, lost profits, special, consequential, punitive
|
||||
or
|
||||
exemplary damages, including, but not limited to, damages for loss of profits, goodwill, use, data or
|
||||
other
|
||||
intangible losses (even if the company has been advised of the possibility of such damages), resulting
|
||||
from: (i)
|
||||
the use or the inability to use the services; (ii) the cost of procurement of substitute goods and
|
||||
services
|
||||
resulting from any goods, data, information or services purchased or obtained or messages received or
|
||||
transactions entered into through or from the services; (iii) unauthorized access to or alteration of
|
||||
your
|
||||
transmissions or data; (iv) statements or conduct of any third party on the service; (v) or any other
|
||||
matter
|
||||
relating to this Terms of Service or the services, whether as a breach of contract, tort (including
|
||||
negligence
|
||||
whether active or passive), or any other theory of liability.
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="font-bold mb-1 mt-4"> Thank you for choosing LitLyx Analytics! </div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang=scss>
|
||||
.tutto-poppins * {
|
||||
font-family: "Poppins";
|
||||
}
|
||||
</style>
|
||||
@@ -1,384 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
|
||||
const featureStyle = 'font-bold poppins text-lyx-text';
|
||||
const cellStyle = 'poppins text-lyx-text'
|
||||
const activeStyle = 'poppins !text-lyx-text border-solid border-[1px] border-green-400 bg-green-400/5'
|
||||
|
||||
|
||||
const columns = [{
|
||||
key: 'feature',
|
||||
label: 'Feature'
|
||||
}, {
|
||||
key: 'litlyx',
|
||||
label: 'Litlyx'
|
||||
}, {
|
||||
key: 'plausible',
|
||||
label: 'Plausible'
|
||||
}, {
|
||||
key: 'google',
|
||||
label: 'Google Analytics'
|
||||
}]
|
||||
|
||||
const comparisons = ref<any[]>([
|
||||
{
|
||||
feature: { text: 'Setup Time', class: featureStyle },
|
||||
litlyx: { text: '30 seconds', class: activeStyle },
|
||||
plausible: { text: 'A few Minutes', class: cellStyle },
|
||||
google: { text: 'Hours', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Real-Time Collection', class: featureStyle },
|
||||
litlyx: { text: 'Instant', class: activeStyle },
|
||||
plausible: { text: 'each 5 minutes', class: cellStyle },
|
||||
google: { text: 'from few minutes, to hours', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Documentation', class: featureStyle },
|
||||
litlyx: { text: 'Small, Easy & Modern', class: activeStyle },
|
||||
plausible: { text: 'Longer than necessary', class: cellStyle },
|
||||
google: { text: 'Mstodon & Complex', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Modern UI', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Yes', class: activeStyle },
|
||||
google: { text: 'Yes', class: activeStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Developers Centric Approach', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Partially', class: cellStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Website Loading Time', class: featureStyle },
|
||||
litlyx: { text: '3 ms', class: activeStyle },
|
||||
plausible: { text: '3 ms', class: activeStyle },
|
||||
google: { text: '5-15 ms', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Library Size', class: featureStyle },
|
||||
litlyx: { text: '3 kb', class: '' },
|
||||
plausible: { text: '2 kb', class: activeStyle },
|
||||
google: { text: 'avg. 50 kb', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Custom Events Support', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Yes', class: activeStyle },
|
||||
google: { text: 'Yes', class: activeStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Native Js Runtimes', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'No', class: cellStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Custom Events metadata Support', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'No', class: cellStyle },
|
||||
google: { text: 'Limited', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Raw Data Export', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'No', class: cellStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Data Ownership', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Yes', class: activeStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Open-Source', class: featureStyle },
|
||||
litlyx: { text: 'Self-Hostable', class: activeStyle },
|
||||
plausible: { text: 'Self-Hostable', class: activeStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Privacy-focused', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Yes', class: activeStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Cookies Stored', class: featureStyle },
|
||||
litlyx: { text: '0 Cookies', class: activeStyle },
|
||||
plausible: { text: '0 Cookies', class: activeStyle },
|
||||
google: { text: 'Yes, many', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'EU standard', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Yes', class: activeStyle },
|
||||
google: { text: 'Limited', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Ad Blockers', class: featureStyle },
|
||||
litlyx: { text: 'Impossible to block', class: activeStyle },
|
||||
plausible: { text: 'Possible, but hard!', class: cellStyle },
|
||||
google: { text: 'Possible', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'AI Data Analyst Assistant', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'No', class: cellStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Report Generation', class: featureStyle },
|
||||
litlyx: { text: 'Detailed reports in seconds', class: activeStyle },
|
||||
plausible: { text: 'Basic Reports', class: cellStyle },
|
||||
google: { text: 'Extensive, but complex to do', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'User-Friendly interface', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'Yes', class: activeStyle },
|
||||
google: { text: 'Moderate Complexity', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Agglomeration from third parties DB’s', class: featureStyle },
|
||||
litlyx: { text: 'Yes', class: activeStyle },
|
||||
plausible: { text: 'No', class: cellStyle },
|
||||
google: { text: 'No', class: cellStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Free Options (Cloud)', class: featureStyle },
|
||||
litlyx: { text: 'Free-Forever plan to start.', class: activeStyle },
|
||||
plausible: { text: '30 days free trial.', class: cellStyle },
|
||||
google: { text: 'Free forever. No Ownership.', class: activeStyle }
|
||||
},
|
||||
{
|
||||
feature: { text: 'Cost Effective (Cloud)', class: featureStyle },
|
||||
litlyx: { text: 'Basic plan: €4,99/mo for 50k visits/events', class: activeStyle },
|
||||
plausible: { text: 'Basic plan: €9,00/mo for 10k page visits', class: cellStyle },
|
||||
google: { text: 'Offers Enterprise only Premium prices (really expansive)', class: cellStyle }
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-8 lg:px-40">
|
||||
|
||||
<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:flex lg:justify-center w-full lg:flex-nowrap">
|
||||
<UTable :rows="comparisons" :columns="columns" :ui="{
|
||||
td: {
|
||||
base: 'border-x-[1px] border-solid border-lyx-widget-lighter'
|
||||
},
|
||||
th: {
|
||||
base: 'border-[1px] border-solid border-lyx-widget-lighter bg-lyx-widget'
|
||||
}
|
||||
}">
|
||||
|
||||
<template #litlyx-data="{ row }">
|
||||
{{ row.litlyx.text }}
|
||||
</template>
|
||||
<template #feature-data="{ row }">
|
||||
{{ row.feature.text }}
|
||||
</template>
|
||||
<template #plausible-data="{ row }">
|
||||
{{ row.plausible.text }}
|
||||
</template>
|
||||
<template #google-data="{ row }">
|
||||
{{ row.google.text }}
|
||||
</template>
|
||||
</UTable>
|
||||
</div>
|
||||
|
||||
<div class="lg:hidden text-lyx-text-dark">
|
||||
[Table available only on desktop]
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">
|
||||
<div class="title">
|
||||
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="title">
|
||||
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 class="section">
|
||||
|
||||
<div class="title text-center">
|
||||
Ready to start with Litlyx?
|
||||
</div>
|
||||
|
||||
<div class="button-container flex-col items-center gap-6">
|
||||
<LyxUiButton link="https://dashboard.litlyx.com/live_demo" target="_blank" class="button" type="outline">
|
||||
Go to Live Demo
|
||||
</LyxUiButton>
|
||||
<LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
|
||||
Start for free now
|
||||
</LyxUiButton>
|
||||
</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
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply font-medium text-[1rem] px-6 py-2
|
||||
}
|
||||
|
||||
.button-container {
|
||||
@apply flex justify-center mt-8
|
||||
}
|
||||
|
||||
</style>
|
||||
8671
landing/pnpm-lock.yaml
generated
8671
landing/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user