.

landing/app.vue

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

landing/assets/scss/main.scss

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

landing/nuxt.config.ts

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

landing/pages/index.vue

@@ -34,160 +34,169 @@ const mouseStyle = computed(() => {
 
 <template>
 
-    <div class="home relative h-full w-full bg-[#151517] overflow-x-hidden">
+    <div class="home relative h-full w-full bg-lyx-background px-8 py-10 overflow-x-hidden">
 
-        <div class="w-full h-full fixed left-0 top-0 hidden md:flex">
+        <div class="poppins font-medium text-[3rem] text-center leading-[3.5rem]">
-            <div :style="mouseStyle" class="absolute w-[30rem] h-[18rem] flex items-center justify-center z-0">
+            Analytics For
-                <div class="blob opacity-5"></div>
+            <span class="text-lyx-primary"> Developers </span>
         </div>
+
+        <div class="poppins text-center text-lyx-text-dark mt-4 text-[1.1rem]">
+            30 Seconds Setup with One Line of Code.
+            All Your Analytics in a Single AI Powered Dashboard.
         </div>
 
 
-        <div class="absolute top-0 left-0 w-full h-full flex flex-col items-center z-0 overflow-hidden">
+        <div class="flex justify-center mt-8">
-            <HomeBgGrid :size="100" :spacing="18" opacity="0.3" class="w-fit h-fit"></HomeBgGrid>
+            <LyxUiButton class="text-[1.2rem] px-6 py-2" type="primary"> Start for free </LyxUiButton>
+        </div>
+
+        <div class="mt-8">
+            <img :src="'placeholder.jpg'" alt="Placeholder">
+        </div>
+
+        <div class="text-center poppins mt-8">
+            Trusted by
+            <NuxtLink class="font-bold" target="_blank" to="#">NuvolAI</NuxtLink>,
+            <NuxtLink class="font-bold" target="_blank" to="#">DTech</NuxtLink>,
+            <NuxtLink class="font-bold" target="_blank" to="#">National Geografic (IT)</NuxtLink>,
+            <NuxtLink class="font-bold" target="_blank" to="#">DeckX</NuxtLink>,
+            <NuxtLink class="font-bold" target="_blank" to="#">Antichi Casali Camper Shop</NuxtLink>,
+            for Data collection.
         </div>
 
 
-        <div class="flex w-full mt-20 justify-center relative z-[10]">
+        <div class="poppins text-center font-semibold text-[1.8rem] mt-20">
-            <div class="flex flex-col items-center justify-center gap-20 rounded-lg py-6">
+            Collect Analytics, <br>Easy way
-
-                <div class="poppins text-center font-bold text-text lg:leading-[5rem] text-[1.7rem] lg:text-[4rem]">
-                    Boost Analytics Collection
-                    <br>
-                    with <span class="text-accent font-bold poppins"> Minimal Setup </span>
         </div>
 
-                <div class="flex gap-4 flex-col lg:flex-row lg:gap-10">
+        <div class="poppins text-center mt-4 text-[1.1rem]">
-
+            More than 10 KPIs like Page Visits, Custom Events
-                    <div class="flex items-center gap-2">
+            Referrers and many more
-                        <i class="fas fa-check text-[1.5rem]"></i>
-                        <div class="poppins text-[1.2rem]"> One-Line Code Setup </div>
-                    </div>
-
-                    <div class="flex items-center gap-2">
-                        <i class="fas fa-check text-[1.5rem]"></i>
-                        <div class="poppins text-[1.2rem]"> 15+ Techs Supported </div>
-                    </div>
-
-                    <div class="flex items-center gap-2">
-                        <i class="fas fa-check text-[1.5rem]"></i>
-                        <div class="poppins text-[1.2rem]"> High customization </div>
-                    </div>
-
-                    <div class="flex items-center gap-2">
-                        <i class="fas fa-check text-[1.5rem]"></i>
-                        <div class="poppins text-[1.2rem]"> GDPR Compliance </div>
-                    </div>
-
-                </div>
-
-                <div class="flex gap-6 items-center flex-col lg:flex-row lg:w-[80%]">
-
-                    <NuxtLink to="https://dashboard.litlyx.com"
-                        class="hover:bg-white/90 font-semibold cursor-pointer flex items-center gap-4 text-xl animated-button px-8 py-3 rounded-2xl">
-                        <div class="flex gap-4 items-center">
-                            <div class="poppins"> Get Started for Free </div>
-                            <i class="fas fa-arrow-right"></i>
-                        </div>
-                    </NuxtLink>
-
-                    <NuxtLink target="_blank" to="https://dashboard.litlyx.com/live_demo"
-                        class="hover:bg-[#1b1b1b] justify-center font-semiboldcursor-pointer w-full flex items-center gap-4 text-xl text-bg-light px-16 py-3 rounded-2xl bg-black border-solid border-[1px] border-white/80 text-white">
-                        <div class="poppins"> Live Demo </div>
-                    </NuxtLink>
-
-                </div>
-
-            </div>
-        </div>
-
-        <div class="flex justify-center mt-10 z-[10] relative">
-            <div class="bg-[#1d1d1f] rounded-[1rem] overflow-hidden w-[96%] lg:w-[60%] ">
-                <img :src="'screen_1.png'" alt="Litlyx dashboard" class="">
-            </div>
         </div>
 
 
-        <div class="flex justify-center mt-20 z-[10] relative items-center flex-col gap-2">
+        <div class="flex justify-center items-center gap-2 text-[.8rem] mt-8">
-            <div class="poppins text-[1.2rem]"> Trusted by</div>
+            <LyxUiButton type="secondary"> Javascript </LyxUiButton>
-            <NuxtLink to="https://nuvol.ai/" target="_blank" class="max-w-[18rem] bg-text-sub p-4 rounded-lg">
+            <LyxUiButton type="secondary"> All js runtime </LyxUiButton>
-                <img class="w-full h-full" alt="Partner_1" :src="'nuvolai.png'">
+            <LyxUiButton type="secondary"> Custom events </LyxUiButton>
-            </NuxtLink>
         </div>
 
-        <div class="flex justify-center mt-20 z-[10] relative items-center flex-col gap-6">
+        <LyxUiCard class="w-full mt-8 bg-lyx-background py-6">
-            <Code></Code>
+            <span class="text-[#9CDCFE] menlo text-[1.1rem]">Lit</span>
+            <span class="text-[#D3D3D3] menlo text-[1.1rem]">.</span>
+            <span class="text-[#DCDCAA] menlo text-[1.1rem]">init</span>
+            <span class="text-[#D3D3D3] menlo text-[1.1rem]">(</span>
+            <span class="text-[#CE9178] menlo text-[1.1rem]">'project_id'</span>
+            <span class="text-[#D3D3D3] menlo text-[1.1rem]">);</span>
+        </LyxUiCard>
+
+
+
+        <div class="poppins text-center mt-4 text-[1.1rem]">
+            That’s It! You are <span class="font-bold"> Ready </span> to Collect data.
+        </div>
+
+        <div class="flex justify-center mt-8">
+            <LyxUiButton class="text-[1.2rem] px-6 py-2" type="primary"> Start for free </LyxUiButton>
         </div>
 
 
-        <div class="flex justify-center mt-40 z-[10] relative items-center flex-col gap-6">
+
-            <div class="poppins font-bold text-text text-center text-[2.2rem] lg:text-[3rem]">
+
-                +15 Supported technologies
+
-            </div>
+
-            <div class="poppins text-[1.2rem] text-text-sub text-center w-[90%] lg:w-[40%]">
+        <div class="poppins text-center font-semibold text-[1.8rem] mt-20">
-                Seamless Integrations with popular JS/TS frameworks, including React, Angular, Vue, Node, Next and many
+            Plug in <br> Everywhere.
-                more.
-            </div>
-            <div class="flex flex-wrap justify-center py-10 lg:gap-8 lg:px-20">
-                <HomeTechCard name="Node.js" icon="tech/4.png"></HomeTechCard>
-                <HomeTechCard name="React" icon="tech/15.png"></HomeTechCard>
-                <HomeTechCard name="Vue.js" icon="tech/8.png"></HomeTechCard>
-                <HomeTechCard name="Next.js" icon="tech/7.png"></HomeTechCard>
-                <HomeTechCard name="Nuxt" icon="tech/12.png"></HomeTechCard>
-                <HomeTechCard name="Angular" icon="tech/9.png"></HomeTechCard>
-                <HomeTechCard name="Firebase" icon="tech/1.png"></HomeTechCard>
-                <HomeTechCard name="NestJS" icon="tech/2.png"></HomeTechCard>
-                <HomeTechCard name="Deno" icon="tech/11.png"></HomeTechCard>
-                <HomeTechCard name="Lambda" icon="tech/14.png"></HomeTechCard>
-                <HomeTechCard name="Fastify" icon="tech/5.png"></HomeTechCard>
-                <HomeTechCard name="Netlify" icon="tech/13.png"></HomeTechCard>
-                <HomeTechCard name="Bun" icon="tech/3.png"></HomeTechCard>
-                <HomeTechCard name="Svelte" icon="tech/6.png"></HomeTechCard>
-                <HomeTechCard name="Solid" icon="tech/10.png"></HomeTechCard>
-            </div>
         </div>
 
-        <div class="flex justify-center mt-40 z-[10] relative items-center flex-col gap-6">
+        <div class="poppins text-center mt-4 text-[1.1rem]">
-            <OpenSource></OpenSource>
+            Seamless Integrations with popular
+            <span class="text-[#FFCA27]">JS</span>/<span class="text-[#017ACB]">TS</span>
+            runtime like React, Angular, Vue, Node, Next and many more.
+        </div>
+
+        <div class="mt-8">
+            <img :src="'techs-new.png'" alt="Techs">
         </div>
 
 
-        <div class="flex justify-center mt-20 z-[10] relative items-center flex-col gap-6">
+
-            <Analyst></Analyst>
+
+
+        <div class="poppins text-center font-semibold text-[1.8rem] mt-20">
+            Connect DB'S In One Place with beautiful charts
         </div>
 
-        <!-- <div class="flex justify-center mt-20 z-[10] relative items-center flex-col gap-6">
+        <div class="poppins text-center mt-4 text-[1.1rem]">
-            <Testimonials>
+            Easily connect all your databases to your dashboard like Supabase, MongoDB, Cassandra and more.
-            </Testimonials>
+        </div>
-        </div> -->
 
-        <div class="flex justify-center mt-40 z-[10] relative items-center flex-col gap-6">
+        <div class="mt-10">
-            <div class="poppins font-bold text-[2.2rem] lg:text-[3rem] text-text"> Why Choose Litlyx </div>
+            <img :src="'db-connect.png'" alt="DB-CONNECT">
-            <div ref="autoscroll"
-                class="flex gap-8 flex-row lg:flex-col overflow-x-auto overflow-y-hidden lg:overflow-hidden w-full hide-scroll px-6">
-                <div class="flex justify-center gap-8">
-                    <HomeCard title="1-Minute Setup" text="Effortlessly set up and start collecting KPIs in seconds."
-                        icon="far fa-clock">
-                    </HomeCard>
-                    <HomeCard title="Real-Time Insights" text="Immediately visualize visits & events on your Dashboard."
-                        icon="far fa-line-chart">
-                    </HomeCard>
-                    <HomeCard title="Custom Events" text="Tailor your user experience tracking with custom events."
-                        icon="far fa-tools">
-                    </HomeCard>
         </div>
-                <div class="flex justify-center gap-8">
+
-                    <HomeCard title="Start for Free" text="Try Litlyx with 3k FREE Visits & Events for your website."
+        <div class="poppins text-center mt-10 text-[1.1rem]">
-                        icon="far fa-gift">
+            We don't only collect Analytics.
-                    </HomeCard>
+            We Agglomerate your Existing data! Showing
-                    <HomeCard title="Open-Source" text="Litlyx is transparent, Self-Hostable & Open-Source."
+            Beautiful Charts!
-                        icon="far fa-globe">
-                    </HomeCard>
-                    <HomeCard title="Cost-Effective" text="Get more for less with Litlyx, without breaking the bank."
-                        icon="far fa-wallet">
-                    </HomeCard>
         </div>
+
+        <div class="mt-8">
+            <img :src="'placeholder.jpg'" alt="Placeholder">
         </div>
+
+
+        <div class="flex justify-center mt-8">
+            <LyxUiButton class="text-[1.2rem] px-10 py-2" type="outline">
+                Go to Live Demo!
+            </LyxUiButton>
+        </div>
+
+
+        <div class="poppins text-center font-semibold text-[1.8rem] mt-20">
+            An AI Data Analyst Available 24/7
+        </div>
+
+        <div class="poppins text-center mt-4 text-[1.1rem]">
+            Take metrics-driven decision with Lit our AI agent. Generate charts chatting with Lit. 
+        </div>
+
+        <div class="mt-8">
+            <img :src="'ai-chat.png'" alt="Ai-Chat">
+        </div>
+
+
+
+
+
+        <div class="poppins text-center font-semibold text-[1.8rem] mt-20">
+            Our Users Loves Litlyx Semplicity
+        </div>
+
+
+
+
+        
+        <div class="poppins text-center font-semibold text-[1.8rem] mt-20">
+            Powered by <br> Open-Source
+        </div>
+
+        <div class="poppins text-center mt-4 text-[1.1rem]">
+            Completely self-hostable with Docker.
+        </div>
+
+        <div class="mt-8">
+            <img :src="'selfhost.png'" alt="Self-Host">
+        </div>
+
+        <div class="flex justify-center flex-col gap-4 w-full items-center mt-20">
+            <LyxUiButton class="text-[1.2rem] px-10 py-2" type="outline">
+               Leave a Star on Github!
+            </LyxUiButton>
+            <LyxUiButton class="text-[1.2rem] px-10 py-2" type="primary">
+               Start for free
+            </LyxUiButton>
         </div>
       
     </div>

landing/tailwind.config.js

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

lyx-ui/.gitignore

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

lyx-ui/README.md

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

lyx-ui/app.vue

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

lyx-ui/assets/lyxui.scss

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

lyx-ui/components/Button.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+
+export type ButtonType = 'primary' | 'secondary' | 'outline' | 'danger';
+
+const props = defineProps<{ type: ButtonType, }>();
+
+</script>
+
+<template>
+    <div class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{
+        'bg-lyx-primary-dark outline-lyx-primary hover:bg-lyx-primary-hover': type === 'primary',
+        'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'secondary',
+        'bg-lyx-transparent outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'outline',
+        'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger',
+    }">
+        <slot></slot>
+    </div>
+</template>

lyx-ui/components/Card.vue

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

lyx-ui/components/Icon.vue

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

lyx-ui/components/ProjectSelector.vue

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

lyx-ui/nuxt.config.ts

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

lyx-ui/package.json

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

lyx-ui/server/tsconfig.json

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

lyx-ui/tailwind.config.js

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

lyx-ui/tsconfig.json

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