adjusting layout landing page

landing/components/Code.vue

@@ -20,7 +20,8 @@ onMounted(() => {
                 Collect Analytics, Easy way
             </div>
             <div class="poppins text-[1.35rem] text-text-sub text-center w-[90%] lg:w-[60%] z-[10]">
-                Website Visits, Custom Events, Referrers, Browsers, Devices, Operating Systems (OS), Countries, Search Terms, Unique Users, Sessions, and many more.
+                Website Visits, Custom Events, Referrers, Browsers, Devices, Operating Systems (OS), Countries, Search
+                Terms, Unique Users, Sessions, and many more.
             </div>
         </div>
 
@@ -32,15 +33,13 @@ onMounted(() => {
         <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">
+                    class="hover:bg-white/90 font-semibold cursor-pointer flex items-center gap-4 text-xl animated-button px-8 py-3 rounded-2xl">
-                    <div class="poppins"> Get Started for Free </div>
+                    <div class="flex gap-4 items-center">
-                    <i class="fas fa-arrow-right"></i>
+                        <div class="poppins"> Get Started for Free </div>
+                        <i class="fas fa-arrow-right"></i>
+                    </div>
                 </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>
 
@@ -49,3 +48,57 @@ onMounted(() => {
 
     </div>
 </template>
+
+<style scoped lang="scss">
+.animated-button {
+    display: grid;
+    place-content: center;
+    color: white;
+    text-shadow: 0 1px 0 #000;
+    width: 100%;
+
+    --border-angle: 0turn; // For animation.
+
+    --main-bg: conic-gradient(from var(--border-angle),
+            rgb(17, 20, 51),
+            rgb(17, 18, 34) 5%,
+            rgb(17, 20, 34) 60%,
+            rgb(17, 28, 51) 95%);
+
+
+    border: solid 2px transparent;
+    --gradient-border: conic-gradient(from var(--border-angle),
+            transparent 25%,
+            rgb(0, 136, 255),
+            transparent 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/components/Testimonials.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+
+
+const testimonials = ref<{ text: string, name: string, stars: number }[]>([
+    // { text: ``, name: "Vik", stars: 5 },
+    // { text: ``, name: "Fede", stars: 5 },
+    { text: `Litlyx saved me so much time.`, name: "Luca", stars: 5 },
+    { text: `This simplicity is a game-changer! Thank you Litlyx.`, name: "Anto", stars: 5 },
+    { text: `Transparency & Open-source. Love it!`, name: "Alessio", stars: 5 },
+    {
+        text: `Litlyx made setting up analytics on my website incredibly easy with just one line of code. 
+                At only €9,99 a month, it tracks all KPIs perfectly. Cost-effective I’ve to say!`, name: "Bobby", stars: 5
+    },
+]);
+
+
+</script>
+
+<template>
+    <div class="flex animated-container w-full h-fit">
+        <div v-for="testimonial of testimonials">
+            <div class="flex flex-col gap-3 items-center px-20 text-center">
+                <div class="poppins font-semibold text-[1.2rem]">
+                    {{ testimonial.name }}
+                </div>
+                <div class="flex gap-2">
+                    <i v-for="_ of new Array(testimonial.stars).fill(0)" class="fas fa-star"></i>
+                </div>
+                <div class="poppins">
+                    "{{ testimonial.text }}"
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+
+
+<style scoped lang="scss">
+$n: 4;
+/* number of elements */
+
+.animated-container {
+    --d: 25s;
+    /* duration */
+    display: grid;
+    grid-template-columns: repeat(4, auto);
+    /* number of visible elements + width */
+    overflow: hidden;
+    -webkit-mask: linear-gradient(90deg, #0000, #000 20% 80%, #0000);
+}
+
+.animated-container>div {
+    grid-area: 1/1;
+    display: grid;
+    align-content: center;
+    gap: 10px;
+    background: #000000 padding-box;
+    border-radius: 1rem;
+    padding: 1rem 1rem;
+    border-inline: 10px solid #0000;
+    animation: r var(--d) linear infinite;
+    height: 15rem;
+}
+
+.animated-container>div img {
+    width: 100%;
+    grid-row: span 2;
+}
+
+.animated-container>div * {
+    margin: 0
+}
+
+.animated-container>div h3 {
+    margin-top: auto;
+}
+
+@for $i from 2 to ($n + 1) {
+    .animated-container>div:nth-child(#{$i}) {
+        animation-delay: calc(#{(1 - $i)/$n}*var(--d))
+    }
+}
+
+
+$perc: calc(100% / $n);
+
+@keyframes r {
+    #{$perc} {
+        transform: translate(-100%)
+    }
+
+    #{$perc + 0.01%} {
+        transform: translate(($n - 1) * 100%)
+    }
+}
+</style>

landing/components/pricing/PricingCard.vue

@@ -12,7 +12,7 @@ const props = defineProps<{ data: PricingCardProp }>();
 
 
 function onUpgradeClick() {
-    window.open('https://dashboard.litlyx.com/book_demo')
+    window.open('https://dashboard.litlyx.com')
 }
 
 </script>
@@ -35,8 +35,8 @@ function onUpgradeClick() {
             <div @click="onUpgradeClick()" v-if="data.active" class="cursor-pointer text-[1rem] font-semibold bg-[#3a3af5] rounded-md py-2 text-center">
                 Start now for FREE
             </div>
-            <div @click="onUpgradeClick()" v-if="!data.active" class="cursor-pointer text-[1rem] font-semibold bg-[#4d4d4d] rounded-md py-2 text-center">
+            <div @click="onUpgradeClick()" v-if="!data.active" class="cursor-pointer text-[1rem] font-semibold bg-[#141414] rounded-md py-2 text-center">
-                Upgrade
+                Go to Dashboard
             </div>
         </div>
 

landing/layouts/header.vue

@@ -32,17 +32,23 @@ nuxtApp.hook("page:finish", () => {
             </NuxtLink>
 
             <div class="grow"></div>
-            <div class="flex gap-8 text-[1rem] text-white font-[500] poppins">
+            <div class="flex gap-8 text-[1.1rem] text-white font-[500]">
-                <NuxtLink target="_blank" to="https://dashboard.litlyx.com/live_demo" class="hover:text-text-sub/90">
+                <NuxtLink target="_blank" to="https://dashboard.litlyx.com/live_demo" class="poppins hover:text-text-sub/90">
-                    Live demo </NuxtLink>
+                    Live demo
-                <NuxtLink target="_blank" to="https://docs.litlyx.com" class="hover:text-text-sub/90"> Docs </NuxtLink>
+                </NuxtLink>
-                <NuxtLink to="/pricing" class="hover:text-text-sub/90"> Pricing </NuxtLink>
+                <NuxtLink target="_blank" to="https://docs.litlyx.com" class="poppins hover:text-text-sub/90">
-                <NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx" class="hover:text-text-sub/90"> GitHub
+                    Docs
+                </NuxtLink>
+                <NuxtLink to="/pricing" class="poppins hover:text-text-sub/90">
+                    Pricing
+                </NuxtLink>
+                <NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx" class="poppins hover:text-text-sub/90">
+                    GitHub
                 </NuxtLink>
             </div>
             <div class="px-10 pt-6 lg:pt-0">
                 <NuxtLink to="https://dashboard.litlyx.com" target="_blank"
-                    class="poppins font-[500] px-4 py-[.3rem] bg-accent rounded-xl">
+                    class="poppins font-[500] px-10 py-[.3rem] bg-accent rounded-xl animated-button">
                     Get started
                 </NuxtLink>
             </div>
@@ -72,39 +78,41 @@ nuxtApp.hook("page:finish", () => {
 
                     <div class="flex flex-col gap-4">
                         <NuxtLink to="https://dashboard.litlyx.com" target="_blank"
-                            class="poppins font-semibold px-4 py-3 text-center bg-accent rounded-lg">
+                            class="animated-button poppins font-semibold px-4 py-3 text-center bg-black rounded-lg">
-                            Get started
+                            Get started for free
                         </NuxtLink>
 
                         <NuxtLink to="https://dashboard.litlyx.com/live_demo" target="_blank"
-                            class="poppins font-semibold px-4 mb-6 py-3 text-center bg-[#e4e6f7] text-accent rounded-lg">
+                            class="poppins font-semibold px-4 mb-6 py-3 text-center bg-transparent border-solid border-[1px] border-white/80 text-white rounded-lg">
                             Live demo
                         </NuxtLink>
                     </div>
 
 
-                    <div class="flex justify-between items-center mr-2">
+                    <NuxtLink target="_blank" to="https://docs.litlyx.com"
-                        <NuxtLink target="_blank" to="https://docs.litlyx.com" class="hover:text-text-sub/90 py-3">
+                        class="flex justify-between items-center mr-2">
+                        <div class="hover:text-text-sub/90 py-3">
                             Docs
-                        </NuxtLink>
+                        </div>
                         <div> <i class="fas fa-chevron-right"></i> </div>
-                    </div>
+                    </NuxtLink>
 
                     <div class="divider border-b border-gray-500/40"></div>
 
-                    <div class="flex justify-between items-center mr-2">
+                    <NuxtLink @click="isMenuOpen = false" to="/pricing" class="flex justify-between items-center mr-2">
-                        <NuxtLink @click="isMenuOpen = false" to="/pricing" class="hover:text-text-sub/90 py-3"> Pricing
+                        <div class="hover:text-text-sub/90 py-3">
-                        </NuxtLink>
+                            Pricing
+                        </div>
                         <div> <i class="fas fa-chevron-right"></i> </div>
-                    </div>
+                    </NuxtLink>
 
                     <div class="divider border-b border-gray-500/40"></div>
 
-                    <div class="flex justify-between items-center mr-2">
+                    <NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx"
-                        <NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx"
+                        class="flex justify-between items-center mr-2">
-                            class="hover:text-text-sub/90 py-3"> GitHub </NuxtLink>
+                        <div class="hover:text-text-sub/90 py-3"> GitHub </div>
                         <div> <i class="fas fa-chevron-right"></i> </div>
-                    </div>
+                    </NuxtLink>
 
                     <div class="divider border-b border-gray-500/40"></div>
 
@@ -191,4 +199,61 @@ nuxtApp.hook("page:finish", () => {
 .layout * {
     font-family: "Inter";
 }
+
+
+
+
+
+
+.animated-button {
+    display: grid;
+    place-content: center;
+    color: white;
+    text-shadow: 0 1px 0 #000;
+    width: 100%;
+
+    --border-angle: 0turn; // For animation.
+
+    --main-bg: conic-gradient(from var(--border-angle),
+            rgb(17, 20, 51),
+            rgb(17, 18, 34) 5%,
+            rgb(17, 20, 34) 60%,
+            rgb(17, 28, 51) 95%);
+
+
+    border: solid 2px transparent;
+    --gradient-border: conic-gradient(from var(--border-angle),
+            transparent 25%,
+            rgb(0, 136, 255),
+            transparent 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/pages/index.vue

@@ -82,17 +82,21 @@ const mouseStyle = computed(() => {
 
                 </div>
 
-                <div class="flex gap-6 items-center flex-col lg:flex-row">
+                <div class="flex gap-6 items-center flex-col lg:flex-row lg:w-[80%]">
+
                     <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">
+                        class="hover:bg-white/90 font-semibold cursor-pointer flex items-center gap-4 text-xl animated-button px-8 py-3 rounded-2xl">
-                        <div class="poppins"> Get Started for Free </div>
+                        <div class="flex gap-4 items-center">
-                        <i class="fas fa-arrow-right"></i>
+                            <div class="poppins"> Get Started for Free </div>
+                            <i class="fas fa-arrow-right"></i>
+                        </div>
                     </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">
+                        class="hover:bg-[#1b1b1b] justify-center font-semiboldcursor-pointer w-full flex items-center gap-4 text-xl text-bg-light px-16 py-3 rounded-2xl bg-black border-solid border-[1px] border-white/80 text-white">
                         <div class="poppins"> Live Demo </div>
                     </NuxtLink>
+
                 </div>
 
             </div>
@@ -146,18 +150,20 @@ const mouseStyle = computed(() => {
             <Analyst></Analyst>
         </div>
 
-
+        <div class="flex justify-center mt-20 z-[10] relative items-center flex-col gap-6">
+            <Testimonials>
+            </Testimonials>
+        </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 class="poppins font-bold text-[2.2rem] lg:text-[3rem] text-text"> Why Choose 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" text="Effortlessly set up and start collecting KPIs in seconds."
                         icon="far fa-clock">
                     </HomeCard>
-                    <HomeCard title="Real-Time Insights"
+                    <HomeCard title="Real-Time Insights" text="Immediately visualize visits & events on your Dashboard."
-                        text="Immediately visualize visits & events on your Dashboard."
                         icon="far fa-line-chart">
                     </HomeCard>
                     <HomeCard title="Custom Events" text="Tailor your user experience tracking with custom events."
@@ -168,21 +174,21 @@ const mouseStyle = computed(() => {
                     <HomeCard title="Start for Free" text="Try Litlyx with 3k FREE Visits & Events for your website."
                         icon="far fa-gift">
                     </HomeCard>
-                    <HomeCard title="Open-Source"
+                    <HomeCard title="Open-Source" text="Litlyx is transparent, Self-Hostable & Open-Source."
-                        text="Litlyx is transparent, Self-Hostable & Open-Source." icon="far fa-globe">
+                        icon="far fa-globe">
                     </HomeCard>
-                    <HomeCard title="Cost-Effective"
+                    <HomeCard title="Cost-Effective" text="Get more for less with Litlyx, without breaking the bank."
-                        text="Get more for less with Litlyx, without breaking the bank."
                         icon="far fa-wallet">
                     </HomeCard>
                 </div>
             </div>
         </div>
+
     </div>
 
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .footer * {
     font-family: "Poppins";
 }
@@ -200,4 +206,58 @@ const mouseStyle = computed(() => {
     background-blend-mode: normal, normal, normal, normal, normal, normal;
     filter: blur(100px);
 }
+
+
+
+.animated-button {
+    display: grid;
+    place-content: center;
+    color: white;
+    text-shadow: 0 1px 0 #000;
+    width: 100%;
+
+    --border-angle: 0turn; // For animation.
+
+    --main-bg: conic-gradient(from var(--border-angle),
+            rgb(17, 20, 51),
+            rgb(17, 18, 34) 5%,
+            rgb(17, 20, 34) 60%,
+            rgb(17, 28, 51) 95%);
+
+
+    border: solid 2px transparent;
+    --gradient-border: conic-gradient(from var(--border-angle),
+            transparent 25%,
+            rgb(0, 136, 255),
+            transparent 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>