From 0a748346c59ff53ee04c1e7d0ad31925b8664120 Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Tue, 29 Oct 2024 15:51:30 +0100
Subject: [PATCH 1/2] Fix responsiveness + other things

---
 dashboard/components/BarCard/Base.vue                |  3 +--
 dashboard/components/CVerticalNavigation.vue         | 11 ++++++-----
 dashboard/components/banner/Offer.vue                |  7 ++++---
 dashboard/components/dashboard/ActionableChart.vue   |  2 +-
 dashboard/components/events/EventsFunnelChart.vue    |  2 +-
 .../components/events/EventsMetadataAnalyzer.vue     |  8 ++++----
 dashboard/components/events/EventsUserFlow.vue       |  8 +++++++-
 dashboard/components/pricing/PricingCardGeneric.vue  |  2 +-
 dashboard/components/settings/General.vue            |  9 +++++++--
 dashboard/components/settings/Template.vue           |  8 ++++----
 dashboard/components/settings/billing.vue            |  4 ++--
 dashboard/pages/analyst.vue                          | 12 ++++++------
 dashboard/pages/events.vue                           |  8 ++++----
 dashboard/pages/index.vue                            |  7 +++++--
 dashboard/pages/payment_ok.vue                       |  2 --
 dashboard/pages/settings.vue                         |  5 +++--
 16 files changed, 56 insertions(+), 42 deletions(-)

diff --git a/dashboard/components/BarCard/Base.vue b/dashboard/components/BarCard/Base.vue
index 3e0d657..6319524 100644
--- a/dashboard/components/BarCard/Base.vue
+++ b/dashboard/components/BarCard/Base.vue
@@ -125,11 +125,10 @@ function openExternalLink(link: string) {
                             </div>
                         </div>
                     </div>
-
                     <div class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{
                         formatNumberK(element.count) }} </div>
                 </div>
-                <div v-if="props.data.length == 0" class="flex justify-center text-text-sub font-bold text-[1.1rem]">
+                <div v-if="props.data.length == 0" class="flex justify-center text-text-sub font-light text-[1.1rem]">
                     No data yet
                 </div>
             </div>
diff --git a/dashboard/components/CVerticalNavigation.vue b/dashboard/components/CVerticalNavigation.vue
index 83c84b0..a1ea2ae 100644
--- a/dashboard/components/CVerticalNavigation.vue
+++ b/dashboard/components/CVerticalNavigation.vue
@@ -203,12 +203,12 @@ const pricingDrawer = usePricingDrawer();
                 <div v-if="snapshot" class="flex flex-col text-[.7rem] mt-2">
                     <div class="flex gap-1 items-center justify-center text-lyx-text-dark">
                         <div class="poppins">
-                            {{ new Date(snapshot.from).toLocaleString('it-IT').split(',')[0].trim().replace(/\//g, '-')
+                            {{ new Date(snapshot.from).toLocaleString().split(',')[0].trim()
                             }}
                         </div>
                         <div class="poppins"> to </div>
                         <div class="poppins">
-                            {{ new Date(snapshot.to).toLocaleString('it-IT').split(',')[0].trim().replace(/\//g, '-') }}
+                            {{ new Date(snapshot.to).toLocaleString().split(',')[0].trim() }}
                         </div>
                     </div>
 
@@ -243,7 +243,7 @@ const pricingDrawer = usePricingDrawer();
 
                     <div v-for="entry of section.entries" :class="{ 'grow flex items-end': entry.grow }">
 
-                        <div v-if="(!entry.adminOnly || (userRoles.isAdmin && !isAdminHidden))"
+                        <div v-if="(!entry.adminOnly || (userRoles.isAdmin.value && !isAdminHidden))"
                             class="bg-lyx-background w-full cursor-pointer text-lyx-text-dark py-[.35rem] px-2 rounded-lg text-[.95rem] flex items-center"
                             :class="{
                                 '!text-lyx-text-darker pointer-events-none': entry.disabled,
@@ -259,7 +259,7 @@ const pricingDrawer = usePricingDrawer();
                                 <div class="manrope grow">
                                     {{ entry.label }}
                                 </div>
-                                <div v-if="entry.premiumOnly && !userRoles.isPremium" class="flex items-center">
+                                <div v-if="entry.premiumOnly && !userRoles.isPremium.value" class="flex items-center">
                                     <i class="fal fa-lock"></i>
                                 </div>
                             </NuxtLink>
@@ -293,7 +293,8 @@ const pricingDrawer = usePricingDrawer();
                             class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
                             <i class="fab fa-dev"></i>
                         </NuxtLink> -->
-                        <NuxtLink to="/admin" v-if="userRoles.isAdmin"
+                        
+                        <NuxtLink to="/admin" v-if="userRoles.isAdmin.value"
                             class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
                             <i class="fas fa-cat"></i>
                         </NuxtLink>
diff --git a/dashboard/components/banner/Offer.vue b/dashboard/components/banner/Offer.vue
index c9d9362..2a2fd63 100644
--- a/dashboard/components/banner/Offer.vue
+++ b/dashboard/components/banner/Offer.vue
@@ -20,15 +20,16 @@ const isPremium = computed(() => {
     <div v-if="!isPremium" class="w-full bg-[#5680f822] p-4 rounded-lg text-[.9rem] flex items-center">
         <div class="flex flex-col grow">
             <div class="poppins font-semibold text-lyx-primary">
-                Launch offer: 25% off
+                Launch offer: 25% off forever with code <span class="text-white font-bold text-[1rem]">LIT25</span> at checkout
+                from Acceleration Plan and beyond.
             </div>
-            <div class="poppins text-lyx-primary">
+            <!-- <div class="poppins text-lyx-primary">
                 We're offering an exclusive 25% discount forever on all plans starting from the Acceleration
                 Plan for our first 100 users who believe in our project.
                 <br>
                 Redeem Code: <span class="text-white font-bold text-[1rem]">LIT25</span> at checkout to
                 claim your discount.
-            </div>
+            </div> -->
         </div>
         <div>
             <LyxUiButton type="outline" @click="goToUpgrade()"> Upgrade </LyxUiButton>
diff --git a/dashboard/components/dashboard/ActionableChart.vue b/dashboard/components/dashboard/ActionableChart.vue
index 2f85efd..4679f0a 100644
--- a/dashboard/components/dashboard/ActionableChart.vue
+++ b/dashboard/components/dashboard/ActionableChart.vue
@@ -251,7 +251,7 @@ const legendClasses = ref<string[]>([
             </SelectButton>
         </template>
 
-        <div class="flex gap-6 w-full justify-between">
+        <div class="flex gap-6 w-full justify-between lg:flex-row flex-col">
             <LyxUiButton type="secondary" :to="isLiveDemo ? '#' : '/analyst'" :disabled="isLiveDemo">
                 <div class="flex items-center gap-2 px-10">
                     <i class="far fa-sparkles text-yellow-400"></i>
diff --git a/dashboard/components/events/EventsFunnelChart.vue b/dashboard/components/events/EventsFunnelChart.vue
index d0de9e3..b6bdf44 100644
--- a/dashboard/components/events/EventsFunnelChart.vue
+++ b/dashboard/components/events/EventsFunnelChart.vue
@@ -140,7 +140,7 @@ async function onEventCheck(eventName: string) {
 <template>
     <CardTitled title="Funnel"
         sub="Monitor and analyze the actions your users are performing on your platform to gain insights into their behavior and optimize the user experience">
-        <div class="flex gap-2 justify-between">
+        <div class="flex gap-2 justify-between lg:flex-row flex-col">
             <div class="flex flex-col gap-1">
                 <div class="min-w-[20rem] text-lyx-text-darker">
                     Select two or more events
diff --git a/dashboard/components/events/EventsMetadataAnalyzer.vue b/dashboard/components/events/EventsMetadataAnalyzer.vue
index bb57b59..da5620c 100644
--- a/dashboard/components/events/EventsMetadataAnalyzer.vue
+++ b/dashboard/components/events/EventsMetadataAnalyzer.vue
@@ -104,7 +104,7 @@ const canSearch = computed(() => {
                         </USelectMenu>
                     </div>
 
-                    <div class="text-lyx-text-darker poppins mt-4 flex items-center gap-4">
+                    <div class="text-lyx-text-darker poppins mt-4 flex items-center gap-4 lg:flex-row flex-col">
                         <div class="w-[10rem]">
                             Search results: {{ metadataFieldGroupedFiltered.length }}
                         </div>
@@ -119,13 +119,13 @@ const canSearch = computed(() => {
                         </div>
                     </div>
 
-                    <div class="flex flex-wrap gap-2 mt-4">
+                    <div class="flex flex-wrap gap-2 lg:mt-4 mt-10">
 
                         <div class="bg-lyx-widget-light text-lyx-text-dark px-3 py-2 rounded-md w-fit"
                             v-for="item of metadataFieldGroupedFiltered">
-                            <div class="flex gap-2">
+                            <div class="flex gap-2 items-center">
                                 <div> {{ item._id || 'OLD_EVENTS' }} </div>
-                                <div> {{ item.count }} </div>
+                                <div class="px-1"> {{ item.count }} </div>
                             </div>
                         </div>
 
diff --git a/dashboard/components/events/EventsUserFlow.vue b/dashboard/components/events/EventsUserFlow.vue
index d9bc3ef..c5c48ec 100644
--- a/dashboard/components/events/EventsUserFlow.vue
+++ b/dashboard/components/events/EventsUserFlow.vue
@@ -62,7 +62,13 @@ async function analyzeEvent() {
                 </div>
             </div>
 
-            <div v-if="analyzing"> Analyzing... </div>
+            <div v-if="analyzing">
+                <div
+                    class="backdrop-blur-[1px] z-[20] w-full h-full flex items-center justify-center font-bold rockmann">
+                    <i
+                        class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
+                </div>
+            </div>
 
             <div class="flex flex-col gap-2" v-if="userFlowData">
                 <div class="flex gap-4 items-center bg-bg py-2 px-2 bg-lyx-widget-light rounded-lg"
diff --git a/dashboard/components/pricing/PricingCardGeneric.vue b/dashboard/components/pricing/PricingCardGeneric.vue
index 82ba2ca..e1e1054 100644
--- a/dashboard/components/pricing/PricingCardGeneric.vue
+++ b/dashboard/components/pricing/PricingCardGeneric.vue
@@ -47,7 +47,7 @@ async function onUpgradeClick() {
 
         <div class="flex flex-col gap-3 text-center pt-3">
             <div v-if="data.active"
-                class="absolute right-6 top-3 poppins text-[.75rem] bg-[#222A42] outline outline-[1px] outline-[#5680F8] px-3 py-[.1rem] rounded-sm">
+                class="absolute right-6 top-3 poppins text-[.75rem] bg-transparent border-[#262626] border-solid border-[1px] px-3 py-[.1rem] rounded-sm">
                 Active
             </div>
             <div v-if="!data.active && data.title === 'Growth'"
diff --git a/dashboard/components/settings/General.vue b/dashboard/components/settings/General.vue
index c042125..63182dd 100644
--- a/dashboard/components/settings/General.vue
+++ b/dashboard/components/settings/General.vue
@@ -198,11 +198,16 @@ function copyProjectId() {
                     <script defer data-project="${project?._id}"
                         src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></script>` }}
                 </div>
-                <div><i class="far fa-copy" @click="copyScript()"></i></div>
+                <div class="hidden lg:flex"><i class="far fa-copy" @click="copyScript()"></i></div>
             </LyxUiCard>
+            <div class="flex justify-end w-full">
+            <LyxUiButton type="outline" class="flex lg:hidden mt-4">
+                Copy script
+            </LyxUiButton>
+        </div>
         </template>
         <template #pdelete>
-            <div class="flex justify-end" v-if="!isGuest">
+            <div class="flex lg:justify-end" v-if="!isGuest">
                 <LyxUiButton type="danger" @click="deleteProject()">
                     Delete project
                 </LyxUiButton>
diff --git a/dashboard/components/settings/Template.vue b/dashboard/components/settings/Template.vue
index 2424262..923a8b6 100644
--- a/dashboard/components/settings/Template.vue
+++ b/dashboard/components/settings/Template.vue
@@ -16,10 +16,10 @@ const props = defineProps<SettingsTemplateProp>();
 
 
 <template>
-    <div class="mt-10 px-4">
+    <div class="mt-10 px-4 xl:pb-0 pb-[10rem]">
         <div v-for="(entry, index) of props.entries" class="flex flex-col">
-            <div class="flex">
-                <div class="flex-[2]">
+            <div class="flex xl:flex-row flex-col gap-4 xl:gap-0">
+                <div class="xl:flex-[2]">
                     <div class="poppins font-medium text-lyx-text">
                         {{ entry.title }}
                     </div>
@@ -27,7 +27,7 @@ const props = defineProps<SettingsTemplateProp>();
                         {{ entry.text }}
                     </div>
                 </div>
-                <div class="flex-[3]">
+                <div class="xl:flex-[3]">
                     <slot :name="entry.id"></slot>
                 </div>
             </div>
diff --git a/dashboard/components/settings/billing.vue b/dashboard/components/settings/billing.vue
index 94b4c13..6e8dc0f 100644
--- a/dashboard/components/settings/billing.vue
+++ b/dashboard/components/settings/billing.vue
@@ -164,7 +164,7 @@ const { visible } = usePricingDrawer();
                                         {{ planData.premium ? 'Premium plan' : 'Basic plan' }}
                                     </div>
                                     <div
-                                        class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-sm">
+                                        class="flex lato text-[.7rem] bg-transparent border-[#262626] border-[1px] px-[.6rem] rounded-sm">
                                         {{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
                                     </div>
                                 </div>
@@ -190,7 +190,7 @@ const { visible } = usePricingDrawer();
                     </div>
                     <div class="my-4 w-full bg-gray-400/30 h-[1px]">
                     </div>
-                    <div class="flex justify-between px-8 flex-col sm:flex-row">
+                    <div class="flex justify-between px-8 flex-col lg:flex-row gap-2 lg:gap-0 items-center">
                         <div class="flex gap-2 text-text-sub text-[.9rem]">
                             <div class="poppins"> Expire date:</div>
                             <div> {{ prettyExpireDate }}</div>
diff --git a/dashboard/pages/analyst.vue b/dashboard/pages/analyst.vue
index bc303eb..2af614b 100644
--- a/dashboard/pages/analyst.vue
+++ b/dashboard/pages/analyst.vue
@@ -148,15 +148,15 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
 
             <div class="flex-[5] py-8 flex h-full flex-col items-center relative overflow-y-hidden">
 
-                <div class="flex flex-col items-center lg:mt-[20vh] px-8 lg:px-28"
+                <div class="flex flex-col items-center xl:mt-[20vh] px-8 xl:px-28"
                     v-if="currentChatMessages.length == 0">
-                    <div class="w-[7rem] lg:w-[10rem]">
+                    <div class="w-[7rem] xl:w-[10rem]">
                         <img :src="'analyst.png'" class="w-full h-full">
                     </div>
                     <div class="poppins text-[1.2rem] text-center">
                         Ask me anything about your data
                     </div>
-                    <div class="flex flex-col lg:grid lg:grid-cols-2 gap-4 mt-6">
+                    <div class="flex flex-col xl:grid xl:grid-cols-2 gap-4 mt-6">
                         <div v-for="prompt of defaultPrompts" @click="currentText = prompt"
                             class="bg-lyx-widget-light hover:bg-lyx-widget-lighter cursor-pointer p-4 rounded-lg poppins text-center whitespace-pre-wrap flex items-center justify-center text-[.9rem]">
                             {{ prompt }}
@@ -216,7 +216,7 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
                         <i class="far fa-arrow-up"></i>
                     </div>
                     <div @click="menuOpen = !menuOpen"
-                        class="bg-lyx-widget-light lg:hidden hhover:bg-lyx-widget-light cursor-pointer px-4 py-2 rounded-full">
+                        class="bg-lyx-widget-light xl:hidden hhover:bg-lyx-widget-light cursor-pointer px-4 py-2 rounded-full">
                         <i class="far fa-message"></i>
                     </div>
                 </div>
@@ -226,11 +226,11 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
 
             <div :class="{
                 'absolute': menuOpen,
-                'hidden lg:flex': !menuOpen
+                'hidden xl:flex': !menuOpen
             }" class="flex-[2] bg-lyx-background-light p-6 flex flex-col gap-4 h-full overflow-hidden">
 
                 <div class="gap-2 flex flex-col">
-                    <div class="lg:hidden absolute right-4 top-4 text-[1.5rem]">
+                    <div class="xl:hidden absolute right-6 top-2 text-[1.5rem]">
                         <i @click="menuOpen = false" class="fas fa-close cursor-pointer"></i>
                     </div>
                 </div>
diff --git a/dashboard/pages/events.vue b/dashboard/pages/events.vue
index 27ed523..fcfa340 100644
--- a/dashboard/pages/events.vue
+++ b/dashboard/pages/events.vue
@@ -19,7 +19,7 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
     <div class="w-full h-full overflow-y-auto pb-20 p-6 gap-6 flex flex-col">
 
 
-        <LyxUiCard class="w-full flex justify-between items-center">
+        <LyxUiCard class="w-full flex justify-between items-center lg:flex-row flex-col gap-6 lg:gap-0">
             <div class="flex flex-col gap-1">
                 <div>
                     Total events: {{ eventsData.data.value?.[0]?.count || '0' }}
@@ -40,9 +40,9 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
             <BarCardEvents :key="refreshKey"></BarCardEvents>
         </div>
 
-        <div class="flex gap-6 flex-col xl:flex-row h-full">
+        <div class="flex gap-6 flex-col xl:flex-row xl:h-full">
 
-            <CardTitled :key="refreshKey" class="p-4 flex-[4] w-full h-full" title="Events"
+            <CardTitled :key="refreshKey" class="p-4 xl:flex-[4] w-full h-full" title="Events"
                 sub="Events stacked bar chart.">
                 <template #header>
                     <SelectButton @changeIndex="eventsStackedSelectIndex = $event"
@@ -55,7 +55,7 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
                 </div>
             </CardTitled>
 
-            <CardTitled :key="refreshKey" class="p-4 flex-[2] w-full h-full" title="Top events"
+            <CardTitled :key="refreshKey" class="p-4 xl:flex-[2] w-full h-full" title="Top events"
                 sub="Displays key events.">
                 <DashboardEventsChart class="w-full"> </DashboardEventsChart>
             </CardTitled>
diff --git a/dashboard/pages/index.vue b/dashboard/pages/index.vue
index 27eb784..17bac5d 100644
--- a/dashboard/pages/index.vue
+++ b/dashboard/pages/index.vue
@@ -97,8 +97,11 @@ const showDashboard = computed(() => project.value && firstInteraction.data.valu
             Create your first project...
         </div>
 
-        <div v-if="justLogged" class="text-[2rem]">
-            The page will refresh soon
+        <div v-if="justLogged" class="text-[2rem] w-full h-full flex items-center justify-center">
+            <div
+                class="backdrop-blur-[1px] z-[20] left-0 top-0 w-full h-full flex items-center justify-center font-bold rockmann absolute">
+                <i class="fas fa-spinner text-[2rem] text-[#727272] animate-[spin_1s_linear_infinite] duration-500"></i>
+            </div>
         </div>
 
     </div>
diff --git a/dashboard/pages/payment_ok.vue b/dashboard/pages/payment_ok.vue
index 06309a8..ce2a699 100644
--- a/dashboard/pages/payment_ok.vue
+++ b/dashboard/pages/payment_ok.vue
@@ -2,8 +2,6 @@
 
 definePageMeta({ layout: 'none' });
 
-const activeProject = useActiveProject();
-
 </script>
 
 
diff --git a/dashboard/pages/settings.vue b/dashboard/pages/settings.vue
index 54c4b2a..e9ed830 100644
--- a/dashboard/pages/settings.vue
+++ b/dashboard/pages/settings.vue
@@ -13,8 +13,9 @@ const items = [
 </script>
 
 <template>
-    <div class="px-10 py-8 h-dvh overflow-y-auto hide-scrollbars">
-        <div class="poppins font-semibold text-[1.3rem]"> Settings </div>
+    <div class="lg:px-10 lg:py-8 h-dvh overflow-y-auto overflow-x-hidden hide-scrollbars">
+        
+        <div class="poppins font-semibold text-[1.3rem] lg:px-0 px-4 lg:py-0 py-4"> Settings </div>
 
         <CustomTab :items="items" class="mt-8">
             <template #general>

From b479ca1bbf5af731503a7206651e549524aed58d Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Tue, 29 Oct 2024 17:51:32 +0100
Subject: [PATCH 2/2] committo tutto

---
 dashboard/components/CVerticalNavigation.vue | 11 ++++++++-
 dashboard/components/FirstInteraction.vue    | 26 ++++++++++++--------
 dashboard/pages/admin/index.vue              |  2 +-
 dashboard/pages/analyst.vue                  |  2 +-
 dashboard/pages/index.vue                    |  2 +-
 dashboard/pages/login.vue                    |  7 +++---
 dashboard/pages/register.vue                 |  7 +++---
 7 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/dashboard/components/CVerticalNavigation.vue b/dashboard/components/CVerticalNavigation.vue
index a1ea2ae..fcff23f 100644
--- a/dashboard/components/CVerticalNavigation.vue
+++ b/dashboard/components/CVerticalNavigation.vue
@@ -149,6 +149,15 @@ const pricingDrawer = usePricingDrawer();
                     </div>
                 </LyxUiButton>
 
+                <LyxUiButton v-if="projectList && (projectList.length >= (maxProjects || 1))"
+                    type="outlined" class="w-full py-1 mt-2 text-[.7rem]">
+                    <div class="flex items-center gap-2 justify-center">
+                        <div><i class="text-lyx-text-darker far fa-lock"></i></div>
+                        <div class="text-lyx-text-darker"> Projects limit reached </div>
+                    </div>
+                </LyxUiButton>
+
+
             </div>
 
 
@@ -293,7 +302,7 @@ const pricingDrawer = usePricingDrawer();
                             class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
                             <i class="fab fa-dev"></i>
                         </NuxtLink> -->
-                        
+
                         <NuxtLink to="/admin" v-if="userRoles.isAdmin.value"
                             class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
                             <i class="fas fa-cat"></i>
diff --git a/dashboard/components/FirstInteraction.vue b/dashboard/components/FirstInteraction.vue
index 627613f..036fcf6 100644
--- a/dashboard/components/FirstInteraction.vue
+++ b/dashboard/components/FirstInteraction.vue
@@ -76,26 +76,32 @@ function reloadPage() {
 
         <div class="flex items-center justify-center mt-10">
             <div class="flex flex-col gap-6">
-                <div class="flex gap-6">
-                    <div>
-                        <CardTitled class="h-full" title="Tutorial" sub="Coming soon. For now enjoy our launch video.">
-                            <div class="flex items-center justify-center h-full">
-                                <iframe width="560" height="315"
+
+                <div class="flex gap-6 xl:flex-row flex-col">
+
+                    <div class="h-full w-full">
+                        <CardTitled class="h-full w-full xl:min-w-[500px]" title="Tutorial"
+                            sub="Coming soon. For now enjoy our launch video.">
+
+                            <div class="flex items-center justify-center h-full w-full">
+
+                                <iframe class="w-full h-full min-h-[400px]"
                                     src="https://www.youtube.com/embed/GntyWMR7jsY?si=YGGkQwrk6-Iqmn8w" title="Litlyx"
                                     frameborder="0"
                                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                     referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                             </div>
+
                         </CardTitled>
                     </div>
 
                     <div class="flex flex-col gap-6">
 
-                        <div>
+                        <div class="w-full">
                             <CardTitled title="Quick Integration"
                                 sub="Start tracking web analytics in one line. (works everywhere js is supported)">
                                 <div class="flex flex-col items-end gap-4">
-                                    <div class="w-full">
+                                    <div class="w-full xl:text-[1rem] text-[.8rem]">
                                         <pre><code class="language-html">{{ scriptText }}</code></pre>
                                     </div>
                                     <LyxUiButton type="secondary" @click="copyScript()">
@@ -122,7 +128,7 @@ function reloadPage() {
                         <CardTitled class="w-full h-full" title="Documentation"
                             sub="Learn how to use Litlyx in every tech stack">
                             <div class="flex flex-col items-end">
-                                <div class="flex justify-center w-full">
+                                <div class="justify-center w-full hidden xl:flex">
                                     <svg width="680" height="100" viewBox="0 0 680 100" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                         <mask id="path-1-inside-1_473_1361" fill="white">
@@ -263,7 +269,7 @@ function reloadPage() {
 
 
 
-        <!-- <div class="flex justify-center gap-10 flex-col lg:flex-row items-center lg:items-stretch px-10">
+        <!-- <div class="flex justify-center gap-10 flex-col xl:flex-row items-center xl:items-stretch px-10">
 
             <div class="bg-menu p-6 rounded-xl flex flex-col gap-2 w-full">
                 <div class="poppins font-semibold"> Copy your project_id: </div>
@@ -273,7 +279,7 @@ function reloadPage() {
                 </div>
             </div>
 
-            <div class="bg-menu p-6 rounded-xl flex flex-col gap-2 w-full lg:max-w-[40vw]">
+            <div class="bg-menu p-6 rounded-xl flex flex-col gap-2 w-full xl:max-w-[40vw]">
                 <div class="poppins font-semibold">
                     Start logging visits in 1 click | Plug anywhere !
                 </div>
diff --git a/dashboard/pages/admin/index.vue b/dashboard/pages/admin/index.vue
index 7f1c68e..21345f3 100644
--- a/dashboard/pages/admin/index.vue
+++ b/dashboard/pages/admin/index.vue
@@ -138,7 +138,7 @@ async function resetCount(project_id: string) {
         <div @click="onHideClicked()" v-if="!isAdminHidden"
             class="bg-menu hover:bg-menu/70 cursor-pointer flex gap-2 rounded-lg w-fit px-6 py-4 text-text-sub">
             <div class="text-text-sub/90"> <i class="far fa-eye"></i> </div>
-            <div> Nascondi dalla barra </div>
+            <div> Hide </div>
         </div>
 
 
diff --git a/dashboard/pages/analyst.vue b/dashboard/pages/analyst.vue
index 2af614b..a7a4ff0 100644
--- a/dashboard/pages/analyst.vue
+++ b/dashboard/pages/analyst.vue
@@ -225,7 +225,7 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
 
 
             <div :class="{
-                'absolute': menuOpen,
+                'absolute top-0 left-0 w-full': menuOpen,
                 'hidden xl:flex': !menuOpen
             }" class="flex-[2] bg-lyx-background-light p-6 flex flex-col gap-4 h-full overflow-hidden">
 
diff --git a/dashboard/pages/index.vue b/dashboard/pages/index.vue
index 17bac5d..640d965 100644
--- a/dashboard/pages/index.vue
+++ b/dashboard/pages/index.vue
@@ -35,7 +35,7 @@ const showDashboard = computed(() => project.value && firstInteraction.data.valu
 
 <template>
 
-    <div class="dashboard w-full h-full overflow-y-auto pb-20 md:pt-4 lg:pt-0">
+    <div class="dashboard w-full h-full overflow-y-auto overflow-x-hidden pb-[7rem] md:pt-4 lg:pt-0">
 
         <div v-if="showDashboard">
 
diff --git a/dashboard/pages/login.vue b/dashboard/pages/login.vue
index 794fb12..f7fca47 100644
--- a/dashboard/pages/login.vue
+++ b/dashboard/pages/login.vue
@@ -159,7 +159,7 @@ async function signInWithCredentials() {
 
         <div class="flex h-full">
 
-            <div class="flex-1 flex flex-col items-center pt-20 lg:pt-[22vh]">
+            <div class="flex-1 flex flex-col items-center pt-20 xl:pt-[22vh]">
 
                 <div class="rotating-thing absolute top-0"></div>
 
@@ -171,9 +171,8 @@ async function signInWithCredentials() {
                     Sign in
                 </div>
 
-                <div class="text-text/80 text-[1.2rem] text-center w-[70%] poppins mt-2">
+                <div class="text-text/80 text-[1.2rem] font-light text-center w-[70%] poppins mt-2">
                     Track web analytics and custom events
-                    <br>
                     with extreme simplicity in under 30 sec.
                     <br>
                     <!-- <div class="font-bold poppins mt-4">
@@ -221,7 +220,7 @@ async function signInWithCredentials() {
                             <div class="flex items-center">
                                 <i class="far fa-envelope"></i>
                             </div>
-                            Continue with Email
+                            Sign in with Email
                         </div>
 
 
diff --git a/dashboard/pages/register.vue b/dashboard/pages/register.vue
index 93183b6..775b186 100644
--- a/dashboard/pages/register.vue
+++ b/dashboard/pages/register.vue
@@ -45,7 +45,7 @@ async function registerAccount() {
 
         <div class="flex h-full">
 
-            <div class="flex-1 flex flex-col items-center pt-20 lg:pt-[22vh]">
+            <div class="flex-1 flex flex-col items-center pt-20 xl:pt-[22vh]">
 
                 <div class="rotating-thing absolute top-0"></div>
 
@@ -57,9 +57,8 @@ async function registerAccount() {
                     Sign up
                 </div>
 
-                <div class="text-text/80 text-[1.2rem] text-center w-[70%] poppins mt-2">
+                <div class="text-text/80 text-[1.2rem] font-light text-center w-[70%] poppins mt-2">
                     Track web analytics and custom events
-                    <br>
                     with extreme simplicity in under 30 sec.
                     <br>
                     <!-- <div class="font-bold poppins mt-4">
@@ -114,7 +113,7 @@ async function registerAccount() {
                     </RouterLink>
                 </div>
 
-                <div v-if="!emailSended" class="text-[.9rem] poppins mt-20 text-text-sub text-center relative z-[2]">
+                <div v-if="!emailSended" class="text-[.9rem] poppins mt-5 xl:mt-20 text-text-sub text-center relative z-[2]">
                     By continuing you are accepting
                     <br>
                     our