add blog-post + links

dashboard/layouts/dashboard.vue

@@ -12,6 +12,7 @@ const sections: Section[] = [
             { label: 'Events', to: '/events', icon: 'fal fa-square-bolt' },
             { label: 'Analyst', to: '/analyst', icon: 'fal fa-microchip-ai' },
             { label: 'Insights (soon)', to: '#', icon: 'fal fa-lightbulb', disabled: true },
+            { label: 'Links (soon)', to: '#', icon: 'fal fa-globe-pointer', disabled: true },
             {
                 label: 'Docs', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
                 action() { Lit.event('docs_clicked') },

dashboard/pages/index.vue

@@ -124,7 +124,7 @@ const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProje
                     </div>
                 </CardTitled>
 
-                <CardTitled :key="refreshKey" class="p-4 flex-1 w-full" title="Sessions"
+                <!-- <CardTitled :key="refreshKey" class="p-4 flex-1 w-full" title="Sessions"
                     sub="Shows trends in sessions.">
                     <template #header>
                         <SelectButton @changeIndex="sessionsChartSelectIndex = $event"
@@ -135,7 +135,7 @@ const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProje
                         <DashboardSessionsLineChart :slice="(selectLabels[sessionsChartSelectIndex].value as any)">
                         </DashboardSessionsLineChart>
                     </div>
-                </CardTitled>
+                </CardTitled> -->
 
             </div> 
 

landing/blog/Blog.ts

@@ -9,7 +9,7 @@ export type BlogPost = {
 }
 
 export const homePostsIndexes = ref<number[]>([
-    0
+    1, 0
 ])
 
 export const blogPosts = ref<BlogPost[]>([
@@ -21,9 +21,19 @@ export const blogPosts = ref<BlogPost[]>([
         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 blogPosts.value.filter((e, i) => homePostsIndexes.value.includes(i));
+    return homePostsIndexes.value.map(e => blogPosts.value[e]);
+    // return blogPosts.value.filter((e, i) => homePostsIndexes.value.includes(i));
 })

landing/pages/blog/why-choose-litlyx.vue

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

landing/pages/index.vue

@@ -83,10 +83,14 @@ async function saveEmail() {
                     All Your Analytics in a Single AI Powered Dashboard.
                 </div>
 
-                <div class="button-container">
+                <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>
@@ -202,6 +206,24 @@ async function saveEmail() {
             </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">
@@ -309,22 +331,6 @@ async function saveEmail() {
             </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 link="/why-choose-litlyx" target="_blank" class="button" type="outline">
-                        Read more
-                    </LyxUiButton>
-                </div>
-            </div>
-
             <div class="section">
                 <div class="subtitle">
                     Update me!