From e6c9ad9470ef8b3b4c2718c64ce2dbc5a7caa378 Mon Sep 17 00:00:00 2001 From: Emily Date: Tue, 23 Jul 2024 18:13:45 +0200 Subject: [PATCH] new landing page ui --- landing/app.vue | 5 +- landing/components/Testimonial.vue | 26 +++ landing/layouts/header.vue | 11 + landing/pages/index.vue | 319 ++++++++++++++++++---------- landing/pages/why-choose-litlyx.vue | 182 ++++++++++++++++ landing/public/docker.png | Bin 0 -> 2396 bytes lyx-ui/components/Input.vue | 25 +++ 7 files changed, 459 insertions(+), 109 deletions(-) create mode 100644 landing/components/Testimonial.vue create mode 100644 landing/pages/why-choose-litlyx.vue create mode 100644 landing/public/docker.png create mode 100644 lyx-ui/components/Input.vue diff --git a/landing/app.vue b/landing/app.vue index 2a554b6..707fab2 100644 --- a/landing/app.vue +++ b/landing/app.vue @@ -17,7 +17,10 @@ useSeoMeta({ ogSiteName: 'Litlyx', ogLocale: 'en_US', ogImageWidth: '1200', - ogImageHeight: '630' + ogImageHeight: '630', + themeColor: '#0A0A0A', + appleMobileWebAppCapable: 'yes', + appleMobileWebAppStatusBarStyle: 'black-translucent', }); diff --git a/landing/components/Testimonial.vue b/landing/components/Testimonial.vue new file mode 100644 index 0000000..a13c900 --- /dev/null +++ b/landing/components/Testimonial.vue @@ -0,0 +1,26 @@ + + + \ No newline at end of file diff --git a/landing/layouts/header.vue b/landing/layouts/header.vue index 685d704..f040465 100644 --- a/landing/layouts/header.vue +++ b/landing/layouts/header.vue @@ -123,6 +123,15 @@ nuxtApp.hook("page:finish", () => {
+ +
+ Why choose Litlyx +
+
+ + +
+
@@ -139,6 +148,7 @@ nuxtApp.hook("page:finish", () => {
+
@@ -223,6 +233,7 @@ nuxtApp.hook("page:finish", () => { Github Pricing + Why choose Litlyx
Company
diff --git a/landing/pages/index.vue b/landing/pages/index.vue index 994e9c6..d15d10a 100644 --- a/landing/pages/index.vue +++ b/landing/pages/index.vue @@ -29,6 +29,10 @@ const mouseStyle = computed(() => { return `top: ${y.value - (blobSize / 2)}px; left: ${x.value - (blobSize / 2)}px; width: ${blobSize}px; height: ${blobSize}px;` }); + + +const email = ref(""); + @@ -36,19 +40,23 @@ const mouseStyle = computed(() => {
-
+
Analytics For Developers
-
- 30 Seconds Setup with One Line of Code. - All Your Analytics in a Single AI Powered Dashboard. -
+
+ +
+ 30 Seconds Setup with One Line of Code. + All Your Analytics in a Single AI Powered Dashboard. +
+ +
+ Start for free +
-
- Start for free
@@ -66,144 +74,239 @@ const mouseStyle = computed(() => {
-
- Collect Analytics,
Easy way -
+
-
- More than 10 KPIs like Page Visits, Custom Events - Referrers and many more -
+
+ Collect analytics,
easy way +
+ +
+ More than 10 KPIs like Page Visits, Custom Events + Referrers and many more +
-
- Javascript - All js runtime - Custom events -
+
+ Javascript + Runtimes + Events +
- - Lit - . - init - ( - 'project_id' - ); - + + + Lit + . + init + ( + 'project_id' + ); + -
- That’s It! You are Ready to Collect data. -
+
+ That’s It! You are Ready to Collect data. +
+ +
+ Start for free +
-
- Start for free
+
+
+ Plug in
everywhere. +
+
+ Seamless Integrations with popular + JS/TS + runtimes like Nuxt, Deno, Next, Vue, React and many more. +
-
- Plug in
Everywhere. -
- -
- Seamless Integrations with popular - JS/TS - runtime like React, Angular, Vue, Node, Next and many more. -
- -
- Techs +
+ Techs +
+
+ +
+ Transform DB's data in beautiful charts +
+ +
+ Easily connect all your databases to your dashboard like Supabase, MongoDB, Cassandra and more. +
+ +
+ DB-CONNECT +
+ +
+ We don't only collect Analytics. + We Agglomerate your Existing data! Showing + Beautiful Charts! +
+ +
+ Placeholder +
- -
- Connect DB'S In One Place with beautiful charts -
- -
- Easily connect all your databases to your dashboard like Supabase, MongoDB, Cassandra and more. -
- -
- DB-CONNECT -
- -
- We don't only collect Analytics. - We Agglomerate your Existing data! Showing - Beautiful Charts! -
- -
- Placeholder +
+ + Go to live demo + +
-
- - Go to Live Demo! - +
+ +
+ An AI data analyst available 24/7 +
+ +
+ Take metrics-driven decision with Lit our AI agent. Generate charts chatting with Lit.  +
+ +
+ Ai-Chat +
+ +
+ +
+ + +
+ Our users loves Litlyx's simplicity +
+ +
+ + + + + + + + +
+ +
+ +
+
+ Powered by
open-source +
+ +
+ Completely self-hostable with Docker. +
+ +
+ Self-Host +
+ +
+ + Leave a Star on Github! + + + Start for free + +
+
-
- An AI Data Analyst Available 24/7 +
+
+ Why choose Litlyx +
+ +
+ Litlyx vs Plausible vs Google Analytics +
+ +
+ + Read more + +
-
- Take metrics-driven decision with Lit our AI agent. Generate charts chatting with Lit.  -
+
+
+ Update me! +
+ +
+ Litlyx is in beta version. We will keep you updated with our latest news. +
+ +
+ + +
+ +
+ + Keep me updated + +
-
- Ai-Chat
- - - -
- Our Users Loves Litlyx Semplicity -
- - - - - -
- Powered by
Open-Source -
- -
- Completely self-hostable with Docker. -
- -
- Self-Host -
- -
- - Leave a Star on Github! - - - Start for free - -
-
\ No newline at end of file diff --git a/landing/public/docker.png b/landing/public/docker.png new file mode 100644 index 0000000000000000000000000000000000000000..6c16b01f74c3e6dcb4716a55b470c00aff1d364c GIT binary patch literal 2396 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 + + +const props = defineProps<{ placeholder?: string, modelValue: string }>(); + +const emits = defineEmits<{ + (e: "update:modelValue", value: string): void +}>(); + + +const handleChange = (event: Event) => { + const target = event.target as HTMLInputElement; + emits('update:modelValue', target.value); +}; + + +//TODO: FUNCTIONALITY + PLACEHOLDER DARK + + + \ No newline at end of file