update landing

landing/assets/scss/animations.scss

@@ -0,0 +1,34 @@
+/**
+ * ----------------------------------------
+ * 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;
+}

landing/assets/scss/main.scss

@@ -4,6 +4,7 @@
 
 @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');

landing/pages/index.vue

@@ -33,20 +33,41 @@ const mouseStyle = computed(() => {
 
 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);
+
 </script>
 
 
 <template>
 
-    <div class="home relative h-full w-full bg-lyx-background px-8 py-10 overflow-x-hidden">
+    <div class="flex justify-center home relative">
 
-        <div class="headline">
+        <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">
+            <div class="section !mt-6">
 
                 <div class="paragraph">
                     30 Seconds Setup with One Line of Code.
@@ -54,22 +75,25 @@ const email = ref<string>("");
                 </div>
 
                 <div class="button-container">
-                <LyxUiButton class="button" type="primary"> Start for free </LyxUiButton>
+                    <LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
+                        Start for free
+                    </LyxUiButton>
                 </div>
 
             </div>
 
             <div class="mt-8">
-            <img :src="'placeholder.jpg'" alt="Placeholder">
+                <img :src="'screenshot.png'" alt="Litlyx dashboard">
             </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="https://nuvol.ai">NuvolAI</NuxtLink>,
-            <NuxtLink class="font-bold" target="_blank" to="#">DTech</NuxtLink>,
+                <NuxtLink class="font-bold" target="_blank" to="https://www.nationalgeographic.it">National Geografic
-            <NuxtLink class="font-bold" target="_blank" to="#">National Geografic (IT)</NuxtLink>,
+                    (IT)</NuxtLink>,
-            <NuxtLink class="font-bold" target="_blank" to="#">DeckX</NuxtLink>,
+                <NuxtLink class="font-bold" target="_blank" to="https://deckx.app">DeckX</NuxtLink>,
-            <NuxtLink class="font-bold" target="_blank" to="#">Antichi Casali Camper Shop</NuxtLink>,
+                <NuxtLink class="font-bold" target="_blank" to="https://www.antichicasalicampershop.it">Antichi Casali
+                    Camper Shop</NuxtLink>,
                 for Data collection.
             </div>
 
@@ -87,19 +111,52 @@ const email = ref<string>("");
 
 
                 <div class="flex justify-center items-center gap-2 text-[.8rem] mt-8">
-                <LyxUiButton type="secondary"> Javascript </LyxUiButton>
+                    <LyxUiButton :class="{ 'outline outline-[1px] outline-[#CD8700]': snippetIndex == 0 }"
-                <LyxUiButton type="secondary"> Runtimes </LyxUiButton>
+                        @click="snippetIndex = 0" type="secondary"> Javascript
-                <LyxUiButton type="secondary"> Events </LyxUiButton>
+                    </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">
-                <span class="text-[#9CDCFE] menlo text-[1.1rem]">Lit</span>
+
-                <span class="text-[#D3D3D3] menlo text-[1.1rem]">.</span>
+                    <div v-if="snippetIndex == 0" class="text-[.9rem]">
-                <span class="text-[#DCDCAA] menlo text-[1.1rem]">init</span>
+                        <span class="text-[#808080] menlo">{{ scriptDeferTokens[0] }}</span>
-                <span class="text-[#D3D3D3] menlo text-[1.1rem]">(</span>
+                        <span class="text-[#569CD6] menlo">{{ scriptDeferTokens[1] }}</span>
-                <span class="text-[#CE9178] menlo text-[1.1rem]">'project_id'</span>
+                        <span class="text-[#9CDCFE] menlo">{{ scriptDeferTokens[2] }}</span>
-                <span class="text-[#D3D3D3] menlo text-[1.1rem]">);</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>
 
 
@@ -109,7 +166,9 @@ const email = ref<string>("");
                 </div>
 
                 <div class="button-container">
-                <LyxUiButton class="button" type="primary"> Start for free </LyxUiButton>
+                    <LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
+                        Start for free
+                    </LyxUiButton>
                 </div>
 
             </div>
@@ -128,7 +187,7 @@ const email = ref<string>("");
                     runtimes like Nuxt, Deno, Next, Vue, React and many more.
                 </div>
 
-            <div class="mt-8">
+                <div class="mt-8 flex justify-center">
                     <img :src="'techs-new.png'" alt="Techs">
                 </div>
             </div>
@@ -144,8 +203,8 @@ const email = ref<string>("");
                     Easily connect all your databases to your dashboard like Supabase, MongoDB, Cassandra and more.
                 </div>
 
-            <div class="my-10">
+                <div class="my-10 flex justify-center">
-                <img :src="'db-connect.png'" alt="DB-CONNECT">
+                    <img class="lg:h-[35rem]" :src="'db-connect.png'" alt="DB-CONNECT">
                 </div>
 
                 <div class="paragraph">
@@ -154,13 +213,14 @@ const email = ref<string>("");
                     Beautiful Charts!
                 </div>
 
-            <div class="mt-8">
+                <div class="mt-8 flex justify-center">
                     <img :src="'placeholder.jpg'" alt="Placeholder">
                 </div>
 
 
                 <div class="button-container">
-                <LyxUiButton class="button" type="outline">
+                    <LyxUiButton link="https://dashboard.litlyx.com/live_demo" target="_blank" class="button"
+                        type="outline">
                         Go to live demo
                     </LyxUiButton>
                 </div>
@@ -177,8 +237,8 @@ const email = ref<string>("");
                     Take metrics-driven decision with Lit our AI agent. Generate charts chatting with Lit. 
                 </div>
 
-            <div class="mt-8">
+                <div class="mt-8 flex justify-center">
-                <img class="scale-125" :src="'ai-chat.png'" alt="Ai-Chat">
+                    <img class="scale-125 lg:scale-100 lg:h-[35rem]" :src="'ai-chat.png'" alt="Ai-Chat">
                 </div>
 
             </div>
@@ -190,20 +250,24 @@ const email = ref<string>("");
                     Our users loves Litlyx's simplicity
                 </div>
 
-            <div class="mt-10 flex flex-col gap-4">
+                <ClientOnly>
-                <Testimonial name="Victoria - CEO" sub="Founder" link-text="@DeckX" link="https://deckx.app"
+                    <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 name="Victoria - CEO" sub="Founder" link-text="@DeckX" link="https://deckx.app"
+                        <Testimonial class="w-full h-full" name="Alessio - CEO" sub="Founder" link-text="@NuvolAI"
-                    text="Just one word: WOW! Easy to use. If I need to check my metrics, I open Litlyx. I love it.">
+                            link="https://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 name="Victoria - CEO" sub="Founder" link-text="@DeckX" link="https://deckx.app"
+                        <Testimonial class="w-full h-full" name="Marco - Business Owner" sub=""
-                    text="Just one word: WOW! Easy to use. If I need to check my metrics, I open Litlyx. I love it.">
+                            link-text="@Antichi Casali Camper Shop" link="https://www.antichicasalicampershop.it"
-                </Testimonial>
+                            text="We needed to track metrics, but we didn’t know what to use. Than Alessio presented us Litlyx. We was Enthusiasts and payied the 9,99 subscription. We are happy about the service they provide for our online Ecommerce selling Camper equipments.">
-                <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>
+                </ClientOnly>
 
             </div>
 
@@ -221,10 +285,10 @@ const email = ref<string>("");
                 </div>
 
                 <div class="button-container flex-col items-center gap-4 !mt-10">
-                <LyxUiButton class="button" type="outline">
+                    <LyxUiButton link="https://github.com/Litlyx/litlyx" target="_blank" class="button" type="outline">
                         Leave a Star on Github!
                     </LyxUiButton>
-                <LyxUiButton class="button" type="primary">
+                    <LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
                         Start for free
                     </LyxUiButton>
                 </div>
@@ -242,7 +306,7 @@ const email = ref<string>("");
                 </div>
 
                 <div class="button-container">
-                <LyxUiButton class="button" type="primary">
+                    <LyxUiButton link="/why-choose-litlyx" target="_blank" class="button" type="outline">
                         Read more
                     </LyxUiButton>
                 </div>
@@ -270,7 +334,7 @@ const email = ref<string>("");
 
             </div>
 
-
+        </div>
     </div>
 
 </template>
@@ -303,6 +367,23 @@ const email = ref<string>("");
     @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
+    }
+}
 
 
 

landing/pages/why-choose-litlyx.vue

@@ -2,10 +2,148 @@
 
 definePageMeta({ layout: 'header' });
 
+
+
+const comparisons = ref<any[]>([
+    {
+        feature: 'Setup Time',
+        litlyx: '30 seconds',
+        plausible: 'A few Minutes',
+        google: 'Hours'
+    },
+    {
+        feature: 'Real-Time Collection',
+        litlyx: 'Instant',
+        plausible: 'each 5 minutes',
+        google: 'from few minutes, to hours'
+    },
+    {
+        feature: 'Documentation',
+        litlyx: 'Small, Easy & Modern',
+        plausible: 'Longer than necessary',
+        google: 'Mstodon & Complex'
+    },
+    {
+        feature: 'Modern UI',
+        litlyx: 'Yes',
+        plausible: 'Yes',
+        google: 'Yes'
+    },
+    {
+        feature: 'Developers Centric Approach',
+        litlyx: 'Yes',
+        plausible: 'Partially',
+        google: 'No'
+    },
+    {
+        feature: 'Website Loading Time',
+        litlyx: '3 ms',
+        plausible: '3 ms',
+        google: '5-15 ms'
+    },
+    {
+        feature: 'Library Size',
+        litlyx: '3 kb',
+        plausible: '2 kb',
+        google: 'avg. 50 kb'
+    },
+    {
+        feature: 'Custom Events Support',
+        litlyx: 'Yes',
+        plausible: 'Yes',
+        google: 'Yes'
+    },
+    {
+        feature: 'Native Js Runtimes',
+        litlyx: 'Yes',
+        plausible: 'No',
+        google: 'No'
+    },
+    {
+        feature: 'Custom Events metadata Support',
+        litlyx: 'Yes',
+        plausible: 'No',
+        google: 'Limited'
+    },
+    {
+        feature: 'Raw Data Export',
+        litlyx: 'Yes',
+        plausible: 'No',
+        google: 'No'
+    },
+    {
+        feature: 'Data Ownership',
+        litlyx: 'Yes',
+        plausible: 'Yes',
+        google: 'No'
+    },
+    {
+        feature: 'Open-Source',
+        litlyx: 'Self-Hostable',
+        plausible: 'Self-Hostable',
+        google: 'No'
+    },
+    {
+        feature: 'Privacy-focused',
+        litlyx: 'Yes',
+        plausible: 'Yes',
+        google: 'No'
+    },
+    {
+        feature: 'Cookies Stored',
+        litlyx: '0 Cookies',
+        plausible: '0 Cookies',
+        google: 'Yes, many'
+    },
+    {
+        feature: 'EU standard',
+        litlyx: 'Yes',
+        plausible: 'Yes',
+        google: 'Limited'
+    },
+    {
+        feature: 'Ad Blockers',
+        litlyx: 'Impossible to block',
+        plausible: 'Possible, but hard!',
+        google: 'Possible'
+    },
+    {
+        feature: 'AI Data Analyst Assistant',
+        litlyx: 'Yes',
+        plausible: 'No',
+        google: 'No'
+    },
+    {
+        feature: 'Report Generation',
+        litlyx: 'Detailed reports in seconds',
+        plausible: 'Basic Reports',
+        google: 'Extensive, but complex to do'
+    },
+    {
+        feature: 'User-Friendly interface',
+        litlyx: 'Yes',
+        plausible: 'Yes',
+        google: 'Moderate Complexity'
+    },
+    {
+        feature: 'Agglomeration from third parties DB’s',
+        litlyx: 'Yes',
+        plausible: 'No',
+        google: 'No'
+    },
+    {
+        feature: 'Cost Effective (Cloud)',
+        litlyx: 'Free-Forever plan to start. Basic plan: €4,99/mo for 50k visits/events',
+        plausible: '30 days free trial. basic plan: €9,00/mo for 10k page visits',
+        google: 'Free forever. Offers Enterprise only Premium prices (really expansive)'
+    }
+]);
+
+
 </script>
 
 <template>
-    <div class="px-8">
+    <div class="px-8 lg:px-40">
 
         <div class="section">
             <div class="title">
@@ -34,15 +172,8 @@ definePageMeta({ layout: 'header' });
 
         <div class="section">
 
-            <div class="hidden lg:grid grid-cols-[20%_20%_30%_30%]">
+            <div class="hidden lg:flex lg:justify-center">
-                <div> Feature </div>
+                <UTable :rows="comparisons"></UTable>
-                <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">

lyx-ui/components/Button.vue

@@ -2,17 +2,18 @@
 
 export type ButtonType = 'primary' | 'secondary' | 'outline' | 'danger';
 
-const props = defineProps<{ type: ButtonType, }>();
+const props = defineProps<{ type: ButtonType, link?: string, target?: string }>();
 
 </script>
 
 <template>
-    <div class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{
+    <NuxtLink tag="div" :to="link" :target="target"
+        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>
+    </NuxtLink>
 </template>