update landing

src/layouts/MainLayout.vue

@@ -1,7 +1,14 @@
 <template>
-  <q-layout view="lHr lpr lFr" class="bg-transparent">
-    <q-header class="main-content text-grey glass">
-      <div ref="headerContainer" class="flex q-ma-md justify-between no-wrap items-center">
+  <q-layout view="lHr lpr lFr" class="bg-transparent relative-position">
+    <q-header
+      class="main-content q-py-sm"
+      :class="isHeroScroll ? 'text-white bg-transparent' : 'text-grey glass'"
+      reveal
+      >
+      <div
+        ref="headerContainer"
+        class="flex q-mx-md justify-between no-wrap items-center"
+        >
         <base-logo ref="logo" class="text-h6"/>
         <div
           ref="menuContainer"
@@ -12,7 +19,7 @@
             ref="buttonsContainer"
             :class="{ 'invisible absolute': !showFullMenu }"
             class="flex row no-wrap"
-          >
+            >
             <q-btn
               v-for="item in menuItems"
               :key="item.id"
@@ -20,7 +27,7 @@
               no-caps
               @click="scrollToElement(item.ref)"
               ref="menuButtons"
-            >
+              >
               <span class="text-no-wrap">{{ $t(item.title) }}</span>
             </q-btn>
           </div>
@@ -31,7 +38,11 @@
             icon="menu"
             @click="showDrawer = !showDrawer"
           />
-          <q-btn outline color="primary" class="q-ml-sm">
+          <q-btn
+            outline
+            :color="isHeroScroll ? 'white' : 'primary'"
+            class="q-ml-sm"
+            >
             <div class="flex items-center no-wrap">
               <span class="text-bold">{{ locale.split('-')[0] }}</span>
             </div>
@@ -80,8 +91,9 @@
     <q-page-container
       class="main-content q-pa-none q-ma-none bg-transparent"
       >
+      <q-scroll-observer axis="vertical" @scroll="updateHeaderStyle"/>
       <q-page class="column">
-        <hero-banner/>
+        <hero-banner class="q-pa-none" style="margin-top: -58px;" id='hero_banner'/>
         <problem-section/>
         <how-works-section id='how_works'/>
         <price-section id='price'/>
@@ -103,6 +115,12 @@
   import FaqSection from 'components/FAQSection.vue'
   import FooterSection from 'components/FooterSection.vue'
 
+  const isHeroScroll = ref(true)
+
+  const updateHeaderStyle = (e) => {
+    isHeroScroll.value = e.position.top <= 5
+  }
+
   const showDrawer = ref(false)
 
   const menuItems = [