Misc/fix landing mobile

components/Brands.vue

@@ -57,7 +57,8 @@
 const props = defineProps({
   class: {
     type: String,
-    default: "mt-6 mb-0 flex flex-wrap justify-center items-center space-x-7",
+    default:
+      "mt-6 mb-0 flex flex-wrap justify-center items-center gap-x-4 sm:gap-x-7 gap-y-2",
   },
 });
 </script>

components/EindePopup.vue

@@ -8,8 +8,8 @@
     leave-to-class="opacity-0 translate-y-10"
   >
     <div
-      class="z-50 sticky transition-all duration-150 left-0 overflow-hidden rounded-lg shadow-lg mx-6 md:w-80"
-      :class="showBottomBanner ? 'bottom-20' : 'bottom-6'"
+      class="z-50 sticky transition-all duration-150 left-0 overflow-hidden rounded-lg shadow-lg mx-6 md:w-80 bottom-6"
+      :class="showBottomBanner ? 'md:bottom-20' : ''"
       v-if="show"
     >
       <a @click="hide" class="absolute top-0 right-0 p-4 group">

components/EindePopupPricing.vue

@@ -1,17 +1,15 @@
 <template>
   <div
-    class="bg-gradient-to-b from-[#477ae1] dark:from-[#355ed5] to-[#003399] dark:to-[#233a7c] dark:bg-gray-600 min-h-full"
+    class="bg-gradient-to-b from-[#477ae1] dark:from-[#355ed5] to-[#003399] dark:to-[#233a7c] min-h-full"
   >
-    <div class="px-6 flex-grow flex flex-col min-h-full">
-      <div class="mt-4">
+    <div class="px-6 py-4 flex-grow flex flex-col">
+      <div class="flex items-center gap-2 mb-3">
         <EuropeRoundStars
-          class="inline-block my-2 w-20 h-20 rounded-full text-[#233a7c]"
-          style="margin-right: -1.2rem"
+          class="w-12 h-12 sm:w-16 sm:h-16 rounded-full text-[#233a7c] flex-shrink-0"
         />
         <svg
           viewBox="0 0 400 400"
-          class="inline-block my-2 w-20 h-20 rounded-full"
-          style="margin-right: -1.2rem"
+          class="w-12 h-12 sm:w-16 sm:h-16 rounded-full flex-shrink-0"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -30,27 +28,22 @@
         </svg>
       </div>
 
-      <h2 class="mt-4 text-2xl font-semibold text-white dark:text-white">
+      <h2 class="text-xl sm:text-2xl font-semibold text-white mb-3">
         {{ $t("popups.europe.title") }}
       </h2>
 
-      <p class="mt-4 leading-relaxed text-white dark:text-white">
-        {{ $t("popups.europe.step_1") }}
-      </p>
-      <p class="leading-relaxed text-white dark:text-white">
-        {{ $t("popups.europe.step_2") }}
-      </p>
-      <p class="leading-relaxed mb-4 text-white dark:text-white">
-        {{ $t("popups.europe.step_3") }}
-      </p>
+      <ul class="space-y-1.5 mb-4 text-white text-sm sm:text-base">
+        <li>{{ $t("popups.europe.step_1") }}</li>
+        <li>{{ $t("popups.europe.step_2") }}</li>
+        <li>{{ $t("popups.europe.step_3") }}</li>
+      </ul>
 
-      <p class="mb-6">
-        <a
-          @click="navigateToWelcome($router, 'click_signup_exit_popup')"
-          class="inline-flex items-center justify-center px-4 py-2 border-2 border-white dark:border-white text-base font-medium rounded-full text-white dark:text-white dark:hover:text-white hover:text-white hover:border-white dark:hover:border-white text-center"
-          >{{ $t("popups.europe.button") }}</a
-        >
-      </p>
+      <a
+        @click="navigateToWelcome($router, 'click_signup_exit_popup')"
+        class="inline-block px-6 py-2 border-2 border-white text-sm sm:text-base font-medium rounded-full text-white hover:bg-white hover:text-[#003399] transition-colors text-center"
+      >
+        {{ $t("popups.europe.button") }}
+      </a>
     </div>
   </div>
 </template>

components/Logos.vue

@@ -1,10 +1,12 @@
 <template>
-  <div class="flex flex-wrap items-center justify-center -m-6 relative z-30">
+  <div
+    class="flex flex-wrap items-center justify-center -m-3 sm:-m-6 relative z-30"
+  >
     <Tooltip
       v-for="company in filtered"
       :key="company.name"
       :text="company.name"
-      class="flex items-center group m-6"
+      class="flex items-center group m-4 sm:m-6"
       :class="{
         [company.class]: company.class,
         ...tooltipclass,

components/Pricing.vue

@@ -51,7 +51,7 @@
   </div>
 
   <div
-    class="mt-8 p-0 sm:py-0 border-b dark:border-b-2 sm:border-none border-gray-200 dark:border-gray-800 bg-gray-50 sm:bg-transparent dark:bg-gray-700 sm:dark:bg-transparent max-w-3xl mx-auto z-20 sticky top-0 w-full sm:relative -translate-y-px"
+    class="mt-8 p-0 sm:py-0 border-b dark:border-b-2 sm:border-none border-gray-200 dark:border-gray-800 bg-gray-50 sm:bg-transparent dark:bg-gray-700 sm:dark:bg-transparent max-w-3xl mx-auto z-20 top-0 w-full sm:relative -translate-y-px"
   >
     <div
       class="flex flex-col md:flex-row justify-center items-center px-6 sm:border border-gray-200 dark:border-none dark:bg-gray-700 rounded-2xl"

components/StickyBottomBanner.vue

@@ -8,7 +8,7 @@
     leave-to-class="opacity-0 translate-y-10"
   >
     <div
-      class="z-50 sticky bottom-0 left-0 right-0 overflow-hidden w-full bg-gradient-to-b from-[#2c5fc5] dark:from-[#2c5fc5] to-[#042f84] dark:to-[#042f84] dark:bg-gray-600 p-2"
+      class="hidden md:block z-50 sticky bottom-0 left-0 right-0 overflow-hidden w-full bg-gradient-to-b from-[#2c5fc5] dark:from-[#2c5fc5] to-[#042f84] dark:to-[#042f84] dark:bg-gray-600 p-2"
       v-if="showBottomBanner"
     >
       <p