new landing page ui

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',
 });
 
 

landing/components/Testimonial.vue

@@ -0,0 +1,26 @@
+<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>

landing/layouts/header.vue

@@ -123,6 +123,15 @@ nuxtApp.hook("page:finish", () => {
 
                     <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">
@@ -141,6 +150,7 @@ nuxtApp.hook("page:finish", () => {
                     </NuxtLink>
                     
 
+
                     <div class="divider border-b border-gray-500/40"></div>
 
 
@@ -223,6 +233,7 @@ nuxtApp.hook("page:finish", () => {
                         <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>

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<string>("");
+
 </script>
 
 
@@ -36,19 +40,23 @@ const mouseStyle = computed(() => {
 
     <div class="home relative h-full w-full bg-lyx-background px-8 py-10 overflow-x-hidden">
 
-        <div class="poppins font-medium text-[3rem] text-center leading-[3.5rem]">
+        <div class="headline">
             Analytics For
             <span class="text-lyx-primary"> Developers </span>
         </div>
 
-        <div class="poppins text-center text-lyx-text-dark mt-4 text-[1.1rem]">
+
+        <div class="section">
+
+            <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">
+                <LyxUiButton class="button" type="primary"> Start for free </LyxUiButton>
+            </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="mt-8">
@@ -66,11 +74,13 @@ const mouseStyle = computed(() => {
         </div>
 
 
-        <div class="poppins text-center font-semibold text-[1.8rem] mt-20">
+        <div class="section">
-            Collect Analytics, <br>Easy way
+
+            <div class="subtitle">
+                Collect analytics, <br>easy way
             </div>
 
-        <div class="poppins text-center mt-4 text-[1.1rem]">
+            <div class="paragraph">
                 More than 10 KPIs like Page Visits, Custom Events
                 Referrers and many more
             </div>
@@ -78,11 +88,12 @@ const mouseStyle = computed(() => {
 
             <div class="flex justify-center items-center gap-2 text-[.8rem] mt-8">
                 <LyxUiButton type="secondary"> Javascript </LyxUiButton>
-            <LyxUiButton type="secondary"> All js runtime </LyxUiButton>
+                <LyxUiButton type="secondary"> Runtimes </LyxUiButton>
-            <LyxUiButton type="secondary"> Custom events </LyxUiButton>
+                <LyxUiButton type="secondary"> Events </LyxUiButton>
             </div>
 
-        <LyxUiCard class="w-full mt-8 bg-lyx-background py-6">
+
+            <LyxUiCard class="w-full mt-8 bg-lyx-background py-6 text-center">
                 <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>
@@ -93,50 +104,51 @@ const mouseStyle = computed(() => {
 
 
 
-        <div class="poppins text-center mt-4 text-[1.1rem]">
+            <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="flex justify-center mt-8">
+            <div class="button-container">
-            <LyxUiButton class="text-[1.2rem] px-6 py-2" type="primary"> Start for free </LyxUiButton>
+                <LyxUiButton class="button" type="primary"> Start for free </LyxUiButton>
+            </div>
+
         </div>
 
 
 
 
-
+        <div class="section">
-
+            <div class="subtitle">
-        <div class="poppins text-center font-semibold text-[1.8rem] mt-20">
+                Plug in <br> everywhere.
-            Plug in <br> Everywhere.
             </div>
 
-        <div class="poppins text-center mt-4 text-[1.1rem]">
+            <div class="paragraph">
                 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.
+                runtimes like Nuxt, Deno, Next, Vue, React and many more.
             </div>
 
             <div class="mt-8">
                 <img :src="'techs-new.png'" alt="Techs">
             </div>
-
-
-
-
-
-        <div class="poppins text-center font-semibold text-[1.8rem] mt-20">
-            Connect DB'S In One Place with beautiful charts
         </div>
 
-        <div class="poppins text-center mt-4 text-[1.1rem]">
+
+        <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="mt-10">
+            <div class="my-10">
                 <img :src="'db-connect.png'" alt="DB-CONNECT">
             </div>
 
-        <div class="poppins text-center mt-10 text-[1.1rem]">
+            <div class="paragraph">
                 We don't only collect Analytics.
                 We Agglomerate your Existing data! Showing
                 Beautiful Charts!
@@ -147,63 +159,154 @@ const mouseStyle = computed(() => {
             </div>
 
 
-        <div class="flex justify-center mt-8">
+            <div class="button-container">
-            <LyxUiButton class="text-[1.2rem] px-10 py-2" type="outline">
+                <LyxUiButton class="button" type="outline">
-                Go to Live Demo!
+                    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]">
+
+        <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">
-            <img :src="'ai-chat.png'" alt="Ai-Chat">
+                <img class="scale-125" :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="section">
 
 
-
+            <div class="subtitle">
-        
+                Our users loves Litlyx's simplicity
-        <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]">
+            <div class="mt-10 flex flex-col gap-4">
+                <Testimonial 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 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 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 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>
+            </div>
+
+        </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">
+            <div class="mt-8 flex justify-center">
-            <img :src="'selfhost.png'" alt="Self-Host">
+                <img class="w-[40%]" :src="'docker.png'" alt="Self-Host">
             </div>
 
-        <div class="flex justify-center flex-col gap-4 w-full items-center mt-20">
+            <div class="button-container flex-col items-center gap-4 !mt-10">
-            <LyxUiButton class="text-[1.2rem] px-10 py-2" type="outline">
+                <LyxUiButton class="button" type="outline">
                     Leave a Star on Github!
                 </LyxUiButton>
-            <LyxUiButton class="text-[1.2rem] px-10 py-2" type="primary">
+                <LyxUiButton class="button" type="primary">
                     Start for free
                 </LyxUiButton>
             </div>
 
         </div>
 
+
+        <div class="section">
+            <div class="subtitle">
+                Why choose Litlyx
+            </div>
+
+            <div class="paragraph">
+                Litlyx vs Plausible vs Google Analytics
+            </div>
+
+            <div class="button-container">
+                <LyxUiButton class="button" type="primary">
+                    Read more
+                </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">
+                    Keep me updated
+                </LyxUiButton>
+            </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]
+}
+
+
+
+
+
 .footer * {
     font-family: "Poppins";
 }

landing/pages/why-choose-litlyx.vue

@@ -0,0 +1,182 @@
+<script lang="ts" setup>
+
+definePageMeta({ layout: 'header' });
+
+</script>
+
+<template>
+    <div class="px-8">
+
+        <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:grid grid-cols-[20%_20%_30%_30%]">
+                <div> Feature </div>
+                <div> Litlyx </div>
+                <div> Plausible </div>
+                <div> Google Analytics </div>
+                <div> A </div>
+                <div> B </div>
+                <div> C </div>
+                <div> D </div>
+            </div>
+
+            <div class="lg:hidden text-lyx-text-dark">
+                [Table available only on desktop]
+            </div>
+
+        </div>
+
+
+        <div class="section">
+            <div class="subtitle">
+                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="subtitle">
+                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>
+</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
+}
+</style>

lyx-ui/components/Input.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+
+
+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
+</script>
+
+<template>
+    <input class="bg-lyx-widget-light text-lyx-text-dark poppins rounded-md outline outline-[1px] outline-lyx-widget-lighter" type="text"
+        :placeholder="props.placeholder" 
+        :value="props.modelValue" 
+        @input="handleChange">
+</template>