enhancements

landing/assets/scss/main.scss

@@ -9,8 +9,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
 @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');
-// @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
 
 .fas,
 .far,
@@ -22,6 +21,10 @@
   font-family: "Font Awesome 6 Brands" !important;
 }
 
+.inconsolata {
+  font-family: "Inconsolata" !important;
+}
+
 .brockmann {
   font-family: "Brockmann" !important;
 }

landing/components/Analyst.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+    <div class="relative w-[90%]">
+
+        <div class="flex justify-center mt-20 z-[25] relative items-center flex-col gap-6">
+            <div class="poppins text-center font-semibold text-[2.2rem] lg:text-[3rem] text-text">
+                AI Analyst
+            </div>
+        </div>
+
+        <div class="flex justify-center mx-auto w-[20rem] z-[25] relative">
+            <img class="w-full h-full" :src="'agent.png'">
+        </div>
+
+        <div class="flex flex-col items-center justify-center gap-2 z-[25] relative">
+            <div
+                class="poppins font-semibold text-[1.5rem] lg:text-[1.85rem] z-[10] text-text-sub text-center w-[75%] lg:w-[40%]">
+                Meet Lit! The Agent that help you analyze your data!
+            </div>
+            <div class="poppins text-[1.35rem] text-text-sub text-center z-[10] w-[90%] lg:w-[60%]">
+                Take metrics-driven decision with the AI agent suggestions!
+            </div>
+        </div>
+    </div>
+</template>

landing/components/Code.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+
+const { start, addToQueue, currentText } = useTextWriter();
+
+onMounted(() => {
+    addToQueue(`Lit.init("project_id");`);
+    addToQueue(`Lit.event("your_event_name");`);
+
+    start(60, 1500);
+})
+
+</script>
+
+<template>
+    <div class="flex flex-col gap-4 w-[90%]">
+
+        <div class="flex flex-col items-center justify-center gap-2">
+            <div
+                class="poppins font-semibold z-[10] text-[2.2rem] lg:text-[3rem] text-text-sub text-center w-[75%] lg:w-[40%]">
+                Collect analytics, faster
+            </div>
+            <div class="poppins text-[1.35rem] text-text-sub text-center w-[90%] lg:w-[60%] z-[10]">
+                Websites visits, Custom events, Referrers, Browsers, Devices, OS, Countries, SearchTerms, User
+                Unique
+                Session and more
+            </div>
+        </div>
+
+        <div
+            class="bg-menu font-semibold px-8 text-[1.4rem] h-24 flex items-center inconsolata mt-12 outline outline-[2px] outline-[#83838388] rounded-lg">
+            {{ currentText }}
+        </div>
+
+        <div class="flex justify-center mt-12 z-[20] relative">
+            <div class="flex gap-6 items-center flex-col lg:flex-row">
+                <NuxtLink to="https://dashboard.litlyx.com"
+                    class="hover:bg-white/90 font-semibold cursor-pointer flex items-center gap-4 text-xl bg-text text-bg-light px-8 py-3 rounded-2xl text-black">
+                    <div class="poppins"> Get started for free </div>
+                    <i class="fas fa-arrow-right"></i>
+                </NuxtLink>
+
+                <!-- <NuxtLink target="_blank" to="https://dashboard.litlyx.com/live_demo"
+                    class="hover:bg-accent/90 font-semibold cursor-pointer flex items-center gap-4 text-xl bg-accent text-bg-light px-16 py-3 rounded-2xl text-text">
+                    <div class="poppins"> Live demo </div>
+                </NuxtLink> -->
+            </div>
+        </div>
+
+
+
+
+    </div>
+</template>

landing/components/MainCard.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+    <div class="py-20 bg-black outline relative outline-[3px] outline-[#6e6e6e70] w-[90%] rounded-xl">
+        <slot></slot>
+    </div>
+</template>

landing/components/OpenSource.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+
+</script>
+
+
+<template>
+    <div class="py-20 bg-black outline relative outline-[3px] outline-[#6e6e6e70] w-[90%] rounded-xl">
+
+        <div class="absolute top-0 w-full h-full overflow-hidden">
+            <Globe class="flex justify-end opacity-80"></Globe>
+        </div>
+
+        <div class="flex flex-col items-center justify-center gap-2">
+            <div class="poppins font-semibold text-[1.6rem] lg:text-[1.9rem] z-[10] text-text-sub text-center">
+                We Are Open-Source
+            </div>
+            <div class="poppins text-[1.35rem] text-text-sub text-center z-[10]">
+                Self Host your own analytics Dashboard
+            </div>
+        </div>
+
+        <div class="flex justify-center mt-10">
+            <a href="https://github.com/Litlyx/litlyx" target="_blank"
+                class="animated-button poppins font-semibold text-[1.1rem] cursor-pointer px-12 py-3 relative z-[20]">
+                Leave a ⭐ on Github
+            </a>
+        </div>
+
+    </div>
+</template>
+
+
+<style scoped lang="scss">
+.animated-button {
+    display: grid;
+    place-content: center;
+    color: white;
+    text-shadow: 0 1px 0 #000;
+    width: fit-content;
+
+    --border-angle: 0turn; // For animation.
+
+    --main-bg: conic-gradient(from var(--border-angle),
+            #213,
+            #112 5%,
+            #112 60%,
+            #213 95%);
+
+
+
+    border: solid 2px transparent;
+    border-radius: 1rem;
+    --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
+
+    background:
+        // padding-box clip this background in to the overall element except the border.
+        var(--main-bg) padding-box,
+        // border-box extends this background to the border space
+        var(--gradient-border) border-box,
+        // Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background.
+        var(--main-bg) border-box;
+
+    background-position: center center;
+
+    animation: bg-spin 3s linear infinite;
+
+    @keyframes bg-spin {
+        to {
+            --border-angle: 1turn;
+        }
+    }
+
+    &:hover {
+        animation-play-state: paused;
+    }
+}
+
+@property --border-angle {
+    syntax: "<angle>";
+    inherits: true;
+    initial-value: 0turn;
+}
+</style>

landing/composables/useTextWriter.ts

@@ -0,0 +1,49 @@
+
+
+
+export function useTextWriter() {
+    const text = ref<string>("");
+
+    const queue: string[] = [];
+    let currentQueueIndex = 0;
+
+    let totalText: string;
+    let interval: any;
+
+    function start(ms: number, msBeforeText: number) {
+        const currentQueueText = queue[currentQueueIndex];
+        totalText = currentQueueText;
+        stop();
+        text.value = '';
+        interval = setInterval(() => {
+            const nextLen = text.value.length + 1;
+            text.value = totalText.substring(0, nextLen);
+            if (text.value.length >= totalText.length) {
+                currentQueueIndex++;
+                if (currentQueueIndex > queue.length - 1) {
+                    currentQueueIndex = 0;
+                }
+                stop();
+                setTimeout(() => {
+                    start(ms, msBeforeText);
+                }, msBeforeText)
+            }
+        }, ms);
+    }
+
+    function addToQueue(newText: string) {
+        queue.push(newText);
+    }
+
+    function stop() {
+        if (interval) clearInterval(interval);
+    }
+
+    onUnmounted(() => {
+        stop();
+    })
+
+    return {
+        currentText: text, addToQueue, start, stop
+    }
+}

landing/layouts/header.vue

@@ -22,7 +22,7 @@ nuxtApp.hook("page:finish", () => {
 
 
             <NuxtLink to="/" tag="div" class="flex gap-4 items-center">
-                <div class="bg-[#2969f1] h-[2.8rem] aspect-[1/1] flex items-center justify-center rounded-lg">
+                <div class="bg-black h-[2.8rem] aspect-[1/1] flex items-center justify-center rounded-lg">
                     <img class="h-[1.8rem]" :src="'/logo.png'">
                 </div>
                 <div class="font-semibold text-[1.6rem] text-gray-300 poppins">
@@ -36,8 +36,8 @@ nuxtApp.hook("page:finish", () => {
                     Live demo </NuxtLink>
                 <NuxtLink target="_blank" to="https://docs.litlyx.com" class="hover:text-text-sub/90"> Docs </NuxtLink>
                 <NuxtLink to="/pricing" class="hover:text-text-sub/90"> Pricing </NuxtLink>
-                <NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx"
+                <NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx" class="hover:text-text-sub/90"> GitHub
-                    class="hover:text-text-sub/90"> GitHub </NuxtLink>
+                </NuxtLink>
             </div>
             <div class="px-10 pt-6 lg:pt-0">
                 <NuxtLink to="https://dashboard.litlyx.com" target="_blank"
@@ -49,7 +49,7 @@ nuxtApp.hook("page:finish", () => {
 
         <div class="flex lg:hidden p-4">
             <NuxtLink to="/" class="flex gap-4 items-center">
-                <div class="bg-[#2969f1] h-[2.8rem] aspect-[1/1] flex items-center justify-center rounded-lg">
+                <div class="bg-black h-[2.8rem] aspect-[1/1] flex items-center justify-center rounded-lg">
                     <img class="h-[1.8rem]" :src="'/logo.png'">
                 </div>
                 <div class="font-bold text-[1.6rem] text-gray-300 poppins">
@@ -119,14 +119,11 @@ nuxtApp.hook("page:finish", () => {
 
             </div>
 
-            <div class="flex justify-center text-[1.3rem] items-center poppins py-16">
-                Made with ❤ in Italy
-            </div>
 
             <div
-                class="border-t-[1px] border-accent/40 flex h-fit py-12 w-full justify-between footer flex-col lg:flex-row lg:px-[8rem]">
+                class="border-t-[1px] border-accent/40 mt-20 flex h-fit py-12 w-full justify-between footer flex-col lg:flex-row lg:px-[8rem] relative z-[20]">
 
-                <div class="flex flex-row lg:flex-col gap-7 justify-center mb-10 lg:mb-0">
+                <div class="flex items-center lg:items-start flex-col gap-7 justify-center mb-10 lg:mb-0">
 
                     <div class="flex items-center gap-2">
                         <div class="poppins font-bold text-[1.6rem] text-text/90">
@@ -134,15 +131,24 @@ nuxtApp.hook("page:finish", () => {
                         </div>
                     </div>
 
-                    <div class="flex gap-6 text-[1.5rem] text-text-sub/80">
+                    <div class="flex gap-6 text-[1.6rem] text-text-sub/80">
                         <!-- <div> <i class="fab fa-x-twitter"></i> </div> -->
-                        <div> <a href="https://www.linkedin.com/company/litlyx" target="_blank"> <i class="fab fa-linkedin"></i>
+                        <div class="flex gap-4">
-                            </a></div>
+                            <a href="https://www.linkedin.com/company/litlyx" target="_blank">
+                                <i class="fab fa-linkedin"></i>
+                            </a>
+                            <a href="https://www.github.com/Litlyx/litlyx" target="_blank">
+                                <i class="fab fa-github"></i>
+                            </a>
+                        </div>
                     </div>
 
-                    <div class="hidden lg:flex">
+                    <div class="flex">
                         <div class="text-[.9rem] text-text-sub/80">
                             © 2024 Litlyx All right reserved.
+                            <span class="ml-1 font-bold">
+                                Made with ❤ in Italy
+                            </span>
                         </div>
                     </div>
 

landing/pages/index.vue

@@ -4,23 +4,48 @@ definePageMeta({ layout: 'header' });
 
 const autoscroll = ref<HTMLElement>();
 
+const x = ref<number>();
+const y = ref<number>();
+
+let mouseMoveHandler: any;
+
+onUnmounted(() => {
+    document.removeEventListener('mousemove', mouseMoveHandler);
+});
+
 onMounted(() => {
-    // setInterval(() => {
+    mouseMoveHandler = function (e: MouseEvent) {
-    //     if (!autoscroll.value) return;
+        x.value = e.screenX;
-    //     autoscroll.value.scrollLeft++;
+        y.value = e.screenY;
-    // }, 10);
+    }
-})
+    document.addEventListener('mousemove', mouseMoveHandler);
+});
+
+const blobSize = 40 * 16;
+
+const mouseStyle = computed(() => {
+    if (!x.value) return;
+    if (!y.value) return;
+    return `top: ${y.value - (blobSize / 2)}px; left: ${x.value - (blobSize / 2)}px; width: ${blobSize}px; height: ${blobSize}px;`
+});
 
 </script>
 
 
 <template>
 
-    <div class="home relative h-full w-full bg-[#151517]">
+    <div class="home relative h-full w-full bg-[#151517] overflow-x-hidden">
+
+        <div class="w-full h-full fixed left-0 top-0">
+            <div :style="mouseStyle" class="absolute w-[30rem] h-[18rem] flex items-center justify-center z-0">
+                <div class="blob opacity-5"></div>
+            </div>
+        </div>
+
 
         <div class="absolute top-0 left-0 w-full h-full flex flex-col items-center z-0 overflow-hidden">
             <HomeBgGrid :size="100" :spacing="18" opacity="0.3" class="w-fit h-fit"></HomeBgGrid>
-            <HomeBgGrid :size="100" :spacing="18" opacity="0.2" class="w-fit h-fit"></HomeBgGrid>
+            <!-- <HomeBgGrid :size="100" :spacing="18" opacity="0.2" class="w-fit h-fit"></HomeBgGrid> -->
         </div>
 
 
@@ -79,7 +104,13 @@ onMounted(() => {
             </div>
         </div>
 
+
         <div class="flex justify-center mt-20 z-[10] relative items-center flex-col gap-6">
+            <Code></Code>
+        </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>
@@ -106,72 +137,23 @@ onMounted(() => {
             </div>
         </div>
 
-        <div class="flex justify-center mt-20 z-[10] relative items-center flex-col gap-6">
+        <div class="flex justify-center mt-40 z-[10] relative items-center flex-col gap-6">
-            <div class="poppins font-bold text-[2.2rem] lg:text-[3rem] text-text">
+            <OpenSource></OpenSource>
-                That's it !
-            </div>
-        </div>
-
-        <div class="flex justify-center z-[10] relative">
-            <img :src="'carbon_1.png'">
-        </div>
-
-        <div class="flex flex-col items-center justify-center gap-2">
-            <div
-                class="poppins font-semibold text-[1.5rem] z-[10] lg:text-[1.85rem] text-text-sub text-center w-[75%] lg:w-[40%]">
-                This One-Line Code Collect 9 KPIs
-            </div>
-            <div class="poppins text-[1.35rem] text-text-sub text-center w-[90%] lg:w-[60%] z-[10]">
-                Websites visits, Custom events, Referrers, Browsers, Devices, OS, Countries, SearchTerms, User Unique
-                Session and more
-            </div>
-        </div>
-
-        <div class="flex justify-center mt-20 z-[20] relative">
-            <div class="flex gap-6 items-center flex-col lg:flex-row">
-                <NuxtLink to="https://dashboard.litlyx.com"
-                    class="hover:bg-white/90 font-semibold cursor-pointer flex items-center gap-4 text-xl bg-text text-bg-light px-8 py-3 rounded-2xl text-black">
-                    <div class="poppins"> Get started for free </div>
-                    <i class="fas fa-arrow-right"></i>
-                </NuxtLink>
-
-                <NuxtLink target="_blank" to="https://dashboard.litlyx.com/live_demo"
-                    class="hover:bg-accent/90 font-semibold cursor-pointer flex items-center gap-4 text-xl bg-accent text-bg-light px-16 py-3 rounded-2xl text-text">
-                    <div class="poppins"> Live demo </div>
-                </NuxtLink>
-            </div>
-        </div>
-
-        <!-- AI AGENT SECTION -->
-
-        <div class="flex justify-center mt-20 z-[10] relative items-center flex-col gap-6">
-            <div class="poppins font-bold text-[2.2rem] lg:text-[3rem] text-text">
-                AI Analyst Integrated
-            </div>
-        </div>
-
-        <div class="flex justify-center mx-auto w-[20rem] z-[10] relative">
-            <img class="w-full h-full" :src="'agent.png'" >
-        </div>
-
-        <div class="flex flex-col items-center justify-center gap-2">
-            <div
-                class="poppins font-semibold text-[1.5rem] lg:text-[1.85rem] z-[10] text-text-sub text-center w-[75%] lg:w-[40%]">
-                Meet Lit! The Agent that help you analyze your data!
-            </div>
-            <div class="poppins text-[1.35rem] text-text-sub text-center z-[10] w-[90%] lg:w-[60%]">
-                Take metrics-driven decision with the AI agent suggestions!
-            </div>
         </div>
 
         
         <div class="flex justify-center mt-20 z-[10] relative items-center flex-col gap-6">
+            <Analyst></Analyst>
+        </div>
+
+
+
+        <div class="flex justify-center mt-40 z-[10] relative items-center flex-col gap-6">
             <div class="poppins font-bold text-[2.2rem] lg:text-[3rem] text-text"> Why use litlyx </div>
             <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"
+                    <HomeCard title="1-Minute Setup" text="Effortlessly set up and start collecting KPIs in seconds."
-                        text="Effortlessly set up and start collecting KPIs in seconds."
                         icon="far fa-clock">
                     </HomeCard>
                     <HomeCard title="Real-time Insights"
@@ -183,13 +165,11 @@ onMounted(() => {
                     </HomeCard>
                 </div>
                 <div class="flex justify-center gap-8">
-                    <HomeCard title="Start for Free"
+                    <HomeCard title="Start for Free" text="Try Litlyx with 3k FREE Visits & Events for your website."
-                        text="Try Litlyx with 3k FREE Visits & Events for your website."
                         icon="far fa-gift">
                     </HomeCard>
                     <HomeCard title="Open-Source"
-                        text="Litlyx is transparent, Self-Hostable & Open-Source. Share same ❤️."
+                        text="Litlyx is transparent, Self-Hostable & Open-Source. Share same ❤️." icon="far fa-globe">
-                        icon="far fa-globe">
                     </HomeCard>
                     <HomeCard title="Cost-Effective"
                         text="Get more for less with Litlyx, maximizing value without breaking the bank."
@@ -210,4 +190,14 @@ onMounted(() => {
 .footer {
     border-style: dashed !important;
 }
+
+
+.blob {
+    width: 100%;
+    height: 100%;
+    border-radius: 13rem;
+    background: linear-gradient(197.37deg, #7450DB -0.38%, rgba(138, 234, 240, 0) 101.89%), linear-gradient(115.93deg, #3E88F6 4.86%, rgba(62, 180, 246, 0.33) 38.05%, rgba(62, 235, 246, 0) 74.14%), radial-gradient(56.47% 76.87% at 6.92% 7.55%, rgba(62, 136, 246, 0.7) 0%, rgba(62, 158, 246, 0.182) 52.16%, rgba(62, 246, 246, 0) 100%), linear-gradient(306.53deg, #2EE4E3 19.83%, rgba(46, 228, 227, 0) 97.33%);
+    background-blend-mode: normal, normal, normal, normal, normal, normal;
+    filter: blur(100px);
+}
 </style>